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/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:
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.
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.