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-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
popper.js node modules. Our preset
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
Check out our official repository to get started and if you notice any issues or something missing in our Bootstrap 4 preset, feel free to raise an issue or submit a pull request.
Bootstrap 4 is still a beta version (our preset uses Bootstrap 4 Beta 2), and a few breaking changes will be coming to Beta 3. After Beta 3 is released, the next release is the final release of Bootstrap 4!
Join the weekly newsletter and never miss out on new tips, tutorials, and more.
- Full-Stack Developer
Tampa, FL / Remote
Nu Image Medical
- PHP Developer
- Full-Stack Developer
Sioux Falls, SD or Remote
- Senior PHP / Vue.js Developer
Portland, OR / Remote
- Full Stack Vue.js Developer (Front-end focus)
- Senior Laravel Web Application Developer
NYC or Remote
- Laravel Developer (Vue, SQL Server)
Geneva, Switzerland / Remote
World Trade Organization