Upgrade Bootstrap 3 to Bootstrap 4 in Laravel 5.5

Upgrade Bootstrap 3 to Bootstrap 4 in Laravel 5.5

Bootstrap 4 has now been released and its time to try it on your Laravel projects so here is the simple way to upgrade your existing Bootstrap 3 to Bootstrap 4, this can be used on existing and new projects. Just be careful with your old projects as there are a lot of breaking changes.

NPM

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

Bootstrap.js

Navigate to your resources/assets/js/bootstrap.js file and find the section.
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
Replace this with the following.
 window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js');
require('bootstrap');

app.scss

Navigate to resources/assets/sass/app.scss and change
bootstrap-sass/assets/stylesheets/bootstrap
//to
bootstrap/dist/css/bootstrap
//Now Run
npm run dev
You should now see the upgraded Bootstrap changes in your Laravel project. Here is a YouTube video which may help if your stuck.

Categories: Posts