Upgrading to Bootstrap 4 in Laravel 5.5

Note: This is outdated information for old versions of Laravel and Bootstrap

With Bootstrap 4 now in beta, many people are beginning to switch their projects over to V4. Obviously the migration process requires changing existing markup, which you can learn more about in the official guide), but for this guide I’ll only be covering how to integrate it in your Laravel Mix build process.

Remove the old Bootstrap dependency

To remove the old dependency, we just need to run this command in our project directory:

npm uninstall bootstrap-sass --save-dev

Install the beta dependencies

We’ll need to install both the Bootstrap 4 beta as well as Popper.js (used by Bootstrap for things like dropdowns) using these two commands:

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

Update your app.scss

In resources/assets/sass/app.scss replace the line

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

with

@import "~bootstrap/scss/bootstrap";

If you have @import "variables"; you’ll need to comment out or remove that line temporarily until you know everything else works, as some variable names or units have changed.

Update your bootstrap.js

A default Laravel installation includes a file named resources/assets/js/bootstrap.js. This file is used to load all of our JavaScript dependencies, so this is the where we can remove

require('bootstrap-sass');

and replace it with the following:

window.Popper = require('popper.js').default;
require('bootstrap');

Compile

Now you should be ready to npm run dev and hopefully everything will compile smoothly!

In my case, I ran into the error Incompatible units: 'rem' and 'px' which was caused by the line $font-size-base: 14px; in the default _variables.scss file. As I mentioned earlier, you can comment out the import statement for that file, or your can comment out or change this line directly. If you run into any other errors, just be sure to read the message thoroughly to help point you in the right direction.