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

Solve it by running following commands!
npm install --save popper.js
npm run dev