Configure Laravel 5.5 with Bootstrap 4

Finally, Bootstrap 4 has come with a lot of amazing features.  Meanwhile, Laravel 5.5 with LTS version has also released. Laravel 5.5 by default comes with bootstrap version 3. In this article, you will learn how to configure Laravel 5 5 with Bootstrap 4 step by step.

Configure Laravel 5 5 with Bootstrap 4

Step 1. Create a new Laravel project. You can use Laravel install or composer installer. If you have any trouble with installation or configuration of Laravel, We recommend you to read our Laravel tutorials first.

laravel new App

Step 2. Now let’s install bootstrap 4 and npm dependencies. By default, Laravel will download bootstrap 3. You can find it in your package.json file.

Open your cmd or terminal and run the npm install command to install the above dependencies. Make sure you are in the application directory.

Step 3. Once npm dependencies installed successfully, let’s install bootstrap 4. Run the following command.

npm install bootstrap@4.0.0-beta

It will install bootstrap 4 beta version. Now inside your node_moduls folder, you have two folders for bootstrap files.

The first one is bootstrap 4 files.

Step 4. It’s time to configure the CSS and JavaScript files. You can set all of this configuration in the resources/assets directory.

First, let’s see what changes we can bring to CSS files. Open the sass/app.scss. You file must look like this.

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

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

It’s importing fonts, variables from _variables.scss and bootstrap 3 from node_modules. Now we must point the bootstrap to version 4. You can do it like this.

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

The last changes for CSS files are to open _variables.scss file and change the px values to rem. It’s because bootstrap 4 is not supporting px value anymore.

Now open your js/bootstrap.js file.

Just change the bootstrap-sass to bootstrap.

 require('bootstrap');

Now you are done.

Step 5. Open your cmd again and run the following command to compile down the bootstrap 4 files successfully.

npm run production

It will compile down all the JavaScript and CSS files to public/CSS and js directory.

Here is the list of other commands. Th production command will minify the code as well.

Now you have configured Laravel 5 5 with bootstrap 4. If you view your Laravel app, everything is broken. It’s because bootstrap team rewrote the bootstrap 4. Everything has changed. Read the documentation to see what has changed.

Conclusion

Bootstrap 4 browser support is not very good. For Internet Explorer version, it should be 10+, and other browsers with the latest version will be supported. If you have any issue, feel free to comment it below.