How to install bootstrap in laravel 8

10
votes

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?

3
csslaraveltwitter-bootstraplaravel-8
Laravel Breeze is the package that is closest to Laravel UI in terms of the backend, however, it's built with TailwindCSS. One option might be to use Breeze, install Bootstrap yourself and then copy over the blade files from the UI. I'm not 100% sure if this would work without a little tweaking though. – Rwd

3 Answers

28
votes

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">
8
votes

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
0
votes

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 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

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>