Upgrading Laravel 5.5 to Bootstrap 4

Laravel 5.5 has been out for some time, Its bundled with the stable version of bootstrap v3. However bootstrap v4 has hit beta and should be stable enough to start any new development on v4.

Bootstrap 4 can be easily installed with following steps.

Step 1 — Remove existing bootstrap

Uninstall Bootstrap

npm uninstall --save-dev bootstrap-sass

Step 2 — Install Bootstrap 4

Install Bootstrap 4 beta and popperjs

npm install --save-dev bootstrap@^4.0.0-beta.2 popper.js

Step 3 — Update code references

In resources/assets/js/bootstrap.js replace

try {
window.$ = window.jQuery = require('jquery');

require('bootstrap-sass');
} catch (e) {}

with

try {
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;

require('bootstrap');
} catch (e) {}

In resources/assets/sass/app.scss replace

@import “~bootstrap-sass/assets/stylesheets/bootstrap”

with

@import “~bootstrap/scss/bootstrap.scss”

In resources/assets/sass/_variable.scss replace

$font-size-base: 14px;

with

$font-size-base: 0.875rem;

Step 4 — Recompile Assets

Run

npm run dev

Now you have removed all Bootstrap 3 references and installed Bootstrap 4