How to configure Laravel 5.5 with Bootstrap 4

Bootstrap 3 to bootstrap 4.3.1 upgrade in Laravel 5.5

Steps involved in the upgrade

1. Open gitbash in the home directory of the Laravel application and run the command given below:

   npm install bootstrap@4.3.1

2. Change needed in resources\assets\sass\app.scss file:
   // Remove this line

   @import "~bootstrap-sass/assets/stylesheets/bootstrap";

   // Add this line

   @import "node_modules/bootstrap/scss/bootstrap";

3. Change needed in file resources\assets\sass\_variables.scss
   // Remove this line from _variable.scss as “px” is not supported by bootstrap4.x.y

   $font-size-base: 14px;

   // Add this line. This will work for bootstrap4.x.y

   $font-size-base: 0.875rem;

4. Change needed in file resources\assets\js\bootstrap.js
   // Remove this line

   require('bootstrap-sass');

   // Add this line for using bootstrap 4.3.1

   require('bootstrap');

5. Open gitbash in you project directory then run
   // Run following command

   npm run dev

   
   Note: npm run dev compiles all the css and js files from resources\assets to public dir

How to check if bootstrap 4.3.1 was successfully compiled?

Open app.css from public/css and check the bootstrap version mentioned in the top comments section. It must show something as shown below

@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

How to use bootstrap 4.3.1 in your html or blade files?

Import app.css from public/css directory in blade or html file (s) using below code

<link rel="stylesheet" href="{{asset('css/app.css')}}">

Do we need to do anything else?

If you have used any class that’s not supported by bootstrap 4 then you need to make changes accordingly by going through the official documentation of bootstrap 4

Possible Errors!

npm install --save popper.js
npm run dev