How to install bootstrap in laravel 8

Question

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?

[Laravel Breeze](https://laravel.com/docs/8.x/starter-kits#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, Jul 15 '21 at 12:27
YES, laravel/ui is deprecated, look at https://github.com/laravel/ui first note in readme ! Breeze/tailwind… — bcag2, Aug 30 '23 at 11:18

score 41 · Accepted Answer · edited Feb 11 '22 at 00:06

41

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

edited Feb 11 '22 at 00:06

Jeffrey Nicholson Carré

2,950
1
26
44

answered Jul 15 '21 at 12:38

Maksim

2,653
2
13
28

1

Thank you! Exactly what I needed. – MrSandyWilly Jul 15 '21 at 12:50
1

Is there any documentation where you find this ? I am a beginner in Laravel and I'd like to see details cause this is a bit magic for me haha. I don't really understand how it works. – Elias Dec 15 '21 at 14:18
it's works thanks – sumanta.k Feb 07 '22 at 15:33
it's doesn't work with me. getting error " mix: not found", when I run npm run dev – Mr.Developer Aug 09 '22 at 12:12
I think this is because u have laravel 9 with vite. U can install laravel mix or try to google laravel vite bootsrap – Maksim Aug 09 '22 at 12:22
i did fixed using "npm install laravel-mix@latest" command – Mr.Developer Aug 09 '22 at 12:23

score 14 · Answer 2 · answered Jul 15 '21 at 12:30

14

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

answered Jul 15 '21 at 12:30

Cleverson Franco

137
7

this does not work in Laravel 8x. it throws the error php artisan ui bootstrap – Kennedy Owusu Dec 10 '21 at 17:12
2

@KennedyOwusu First run composer require laravel/ui – Apr 07 '22 at 06:05

Billu · Answer 3 · 2022-05-06T20:14:43.880

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>

Mohamed H. Amin · Answer 4 · 2022-07-10T13:45:59.377

2

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

edited Jul 10 '22 at 13:45

answered Jul 10 '22 at 13:40

Mohamed H. Amin

21
4

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/32214403) – Akshay Jul 15 '22 at 07:38

score 1 · Answer 5 · answered Jun 18 '22 at 08:15

1

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

answered Jun 18 '22 at 08:15

Juergen Schulze

1,515
21
29

If you would like to use Fortify for Auth, MFA and other Auth functionality, for step 4 simply do `php artisan ui bootstrap`. *Note* you would need to create all required views per the documentation [docs] (https://laravel.com/docs/9.x/fortify#authentication) – avn Oct 18 '22 at 13:41

Mohamed Raza · Answer 6 · 2022-09-26T18:29:35.770

composer req laravel/ui:* will resolve the following problem

Problem 1
    - Root composer.json requires laravel/ui ^4.0 -> satisfiable by laravel/ui[v4.0.0, v4.0.1, v4.0.2, 4.x-dev].
    - laravel/ui[v4.0.0, ..., 4.x-dev] require illuminate/console ^9.21 -> found illuminate/console[v9.21.0, ..., 9.x-dev] but these were not loaded, likely because it conflicts with another require.

mentioned problem will be occured when you have update the laravel and composer into latest version and you are tring to install a previous version there for you have to put following command in order to fetch supported version of package

composer req laravel/ui:*
php artisan ui bootstrap
npm install
npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps
npm install sass-loader@^12.1.0 sass resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps
npm run dev

How to install bootstrap in laravel 8

6 Answers6

`composer require laravel/ui`
`php artisan ui bootstrap`
`npm install`
`npm run dev`

Linked

How to install bootstrap in laravel 8

6 Answers6

composer require laravel/ui php artisan ui bootstrap npm install npm run dev

Linked

`composer require laravel/ui`
`php artisan ui bootstrap`
`npm install`
`npm run dev`