How to configure Laravel 5.5 with Bootstrap 4

Bootstrap 3 to bootstrap 4.3.1 upgrade in Laravel 5.5

Note: Laravel 5.5 uses bootstrap 3 by default
Steps involved in the upgrade
  1. Open gitbash in the home directory of the Laravel application and run the command given below:
  2. Change needed in resources\assets\sass\app.scss file:
    // Remove this line // Add this line
  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 // Add this line. This will work for bootstrap4.x.y
  4. Change needed in file resources\assets\js\bootstrap.js
    // Remove this line // Add this line for using bootstrap 4.3.1
  5. Open gitbash in you project directory then run
    // Run following command
    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



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



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!

Solve it by running following commands!