Scroll To Top

Configure Laravel 5.5 with Bootstrap 4

Posted in Articles, Code2 months ago • Written by Hujjat NazariNo Comments

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.

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.

npm packages for laravel 5.5

npm packages for Laravel 5.5

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

npm install command

npm install command

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

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

bootstrap 4 and 3 directories

Bootstrap 4 and 3 directories

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.

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.

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.

bootstrap px to rem

Bootstrap px to rem

Now open your js/bootstrap.js file.

bootstrap 4 and laravel files

Bootstrap 4 and Laravel files

Just change the bootstrap-sass to bootstrap.

Now you are done.

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

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.

npm command list

npm command list

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.


TAGS: , , , , , , , ,

Leave A Response