Bootstrap 4 Laravel Preset for Laravel 5.5

 

You can start using Bootstrap 4 beta with Laravel 5.5 with our new Bootstrap 4 frontend preset. The preset includes scaffolding for SCSS files, and imports Bootstrap 4 JavaScript plugins, jQuery, and Popper.js. As of this writing, we keep the jQuery dependency that ships with Laravel, but according to the Bootstrap documentation the jQuery slim version could be used instead.

The Bootstrap 4 preset resembles the current Bootstrap 3 scaffolding that ships with Laravel by default, with Bootstrap 4 variables and markup that give you a good starting point. When the final version of Bootstrap 4 is released, you will be able to update your project (relatively) smoothly.

How Does the Preset Work?

Laravel 5.5 ships with a preset command that gives you the ability to change frontend scaffolding or even delete it. Our package registers two presets, bootstrap4, and bootstrap4-auth, to provide you with more flexibility if you don’t want the auth views.

When you run the Bootstrap 4 preset command, it will remove the bootstrap-sass node module, and add bootstrap and popper.js node modules. Our preset bootstrap.js is the same as the default, except for a global Popper.js import, which is a new dependency for various Bootstrap 4 JavaScript plugins.

The app.scss file keeps the Raleway Google font, and imports an updated _variables.scss file that gives you a good starting point for your custom CSS.

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

I’ve gone through the _variables.scss file and ported over some of the variables from the default Laravel version, and removed variables that are no longer relevant. For example, the panel component no longer exists in Bootstrap 4, and we’ve removed the associated variables. The variables file is a starting point that you can easily modify, and I’d recommend you learn more from Bootstrap’s theming documentation.

Installing the Bootstrap 4 Frontend Preset

With the new package auto-discovery installing the Laravel Bootstrap 4 preset couldn’t be simpler:

composer require laravelnews/laravel-twbs4
php artisan preset bootstrap4-auth
yarn && yarn dev

If you don’t need the auth views, you can install the preset like the following:

composer require laravelnews/laravel-twbs4
php artisan preset bootstrap4
yarn && yarn dev