All of the info I can find online says that you should install bootstrap by running composer require laravel/ui and then php artisan ui boostrap. However, in Laravel 8, laravel/ui is deprecated. Is there a new/better way of installing bootstrap?
How to install bootstrap in laravel 8
Viewed 31799
5 Answers
You can install bootstrap manually and compile sass.
First, add it to npm with compilers:
npm install bootstrap
npm install sass
npm install sass-loader
Second, create (if not created) resources/sass/app.scss and add this:
@import '~bootstrap';
Third, add compilation in webpack.mix.js:
mix.sass('resources/sass/app.scss', 'public/css')
Than, compile it with npm run dev - you see compiled file public/css/app.css
Now you can use it in templates with asset:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
The way I do it is similar to what you mention, even in Laravel 8. So I believe you are on the right path.
You can create a new Laravel project using this comand
composer create-project laravel/laravel --prefer-dist laravel-bootstrap
after, in laravel folder run
composer require laravel/ui
If you just want to add bootstrap to an existing project, just run:
php artisan ui bootstrap
npm install
npm run dev
And if you need Auth
php artisan ui bootstrap --auth
Solution 1: Install bootstrap manually
1). Download bootstrap's source files from bootstrap website: https://getbootstrap.com/docs/5.1/getting-started/download/
See this screenshot to download
2). Rename downloaded bootstrap folder and add it into the Public folder
3). Load Bootstrap files in your file/view
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="{{asset('bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
<!-- Bootstrap Bundle with Popper -->
<script src="{{asset('bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<title>Hello, world!</title>
<button class="btn btn-primary">Bootstrap btn</button>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Solution 2: Install bootstrap with package manager
Create Laravel Project
composer create-project laravel/laravel --prefer-dist laravel-bootstrap
Select Project Folder
cd laravel-bootstrap
Install Bootstrap in Laravel
php artisan ui bootstrap
Install Bootstrap Packages
npm -v
Finally, install the bootstrap package and the related frontend dependencies such as jquery
npm install
Compile Assets
For SCSS: Open resources/sass folder app.scss file and add the following lines
@import 'variables';
@import '~bootstrap/scss/bootstrap';
For CSS: Open resources/css folder app.css file and add the following lines
@import 'variables';
@import '~bootstrap/css/bootstrap';
Run the below command for asset compilation
for development: npm run dev
for production: npm run production
Automate SASS or CSS and JS Changes
If you are lazy and don’t want to run the npm run dev command every time you make changes in SASS/CSS and JS file, you should use the following command.
npm run watch
After compile see this status in terminal
Finally, load css and js files in your blade template
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<h1>Tutorial made by Positronx.io</h1>
</body>
</html>
composer require laravel/ui
php artisan ui bootstrap
npm install
npm run dev
If you didn't see Laravel Mix compiled successfully, follow this Mix documentation page "https://laravel-mix.com/docs/6.0/installation"
Windows 10
Laravel v9.17.0
PHP v8.1.6
composer create-project laravel/laravel <project>
cd <project>
composer req laravel/ui
php artisan ui bootstrap --auth
npm install bootstrap
npm install sass
npm install sass-loader
npm install && npm run dev
Related