Integrating Bootstrap 4 Into Your Laravel Application

  • January 03, 2017

Welcome to the incredibly popular Easy Laravel 5 companion blog. To celebrate the new edition's release (updated for Laravel 5.5!) use the discount code easteregg to receive 20% off the book or book/video package! » Buy the book

At the time of this writing, Bootstrap 3 had been Laravel's "preset" CSS framework for quite some time, meaning (as you just learned) Bootstrap could be integrated into a Laravel application with minimal effort. Yet Bootstrap 4 has been under active development for more than two years, and the third beta release has recently been released. Indeed, the new version of Bootstrap is creeping so close to a production release that on November 9, 2017 Taylor Otwell tweeted "I figure it will be time to have a Bootstrap 4 preset in the core for Laravel 5.6".

If you don't want to wait for Laravel 5.6 or the Bootstrap production release (as I've done with HackerPair), then you can take advantage of a third-party preset solution now. It's called the "Laravel 5.5 Frontend Preset for Bootstrap 4", and is available [here](composer require laravelnews/laravel-twbs4)

$ composer require laravelnews/laravel-twbs4

Next you'll update package.json, a variety of views (including resources/views/layouts/app.blade.php and resources/views/welcome.blade.php), and various assets/sass files to take advantage of Bootstrap 4. Read that last sentence twice, or maybe even three times. If you've spent any time at all tweaking any of these files, then you'll want to back up these files (or better, commit them to your Git repository). After you've taken care to make these files recoverable if necessary, run the following command:

$ php artisan preset bootstrap4-auth
Bootstrap (v4) scaffolding with auth views installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

In addition to changing the aforementioned files, a new directory named auth has been created in your resources/views/directory. This directory contains various authentication- and account-related files. The reason why this seemingly incongruously was suddenly created is because the Bootstrap 4 preset wants to make sure the authentication view markup is updated to use Bootstrap 4-specific syntax. If you don't plan on integrating authentication- or account-related features into your application, you can instead execute:

$ php artisan preset bootstrap4

Finally, you'll need to install the Bootstrap 4-specific version of the bootstrap-sass package. This is done by running npm install anew, because when you ran the previous preset command it updated your project's package.json file, replacing the following line:

"bootstrap-sass": "^3.3.7",

with:

"bootstrap": "^4.0.0-beta.2",

If you're wondering why bootstrap-sass has been removed altogether, it's because Bootstrap 4 uses Sass by default, meaning there's no need for a custom npm package which melds the two together.

Finally, run npm run dev to rebuild your project assets:

$ npm run dev

Once complete, your project can take advantage of Bootstrap 4's many exciting new features!

Chapter 2 shows you how to integrate and manage CSS within your Laravel application.

Buy the book