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
    // Add this line for using bootstrap 4.3.1
  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(,400,600);/*!
 * Bootstrap v4.3.1 (
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (

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