The Preferred way of using Bootstrap with Laravel 7

3 min readMar 25, 2020

Are you lazy just like me? Do you get bored of writing custom CSS for everything then this article might help you. We are going to discuss about the preferred way of using Bootstrap the famous CSS framework with Laravel. Laravel comes with Laravel Mix (Asset Compiler with Webpack). You can get numerous article about Webpack and thousands for Laravel Mix. Today we are going to discuss about the way of compiling assets namely CSS using Laravel Mix along with bootstrap.

Installation

In this part we will be installing some of our dependencies. In Laravel-7, we need to install UI as separate package.

composer require laravel/ui — dev

And for generating basic scaffolding for bootstrap we can use artisan command

php artisan ui bootstrap

This will add some of the packages to your package.json file including proper.js and jquery.js you can even delete them if you are not intending to use them.

Now you need to install the packages with

yarn if you are using yarn

npm install

we are assuming that Node is installed in your machine. check for sure node -v and npm -v

Asset Compilation

Till now you may have noticed that , some of the files are changed or/and added to he sass folder of resources directory. Namely, app.scss and _variables.scss files are added and modified.

app.scss must look like following

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

For asset compilation you have to use

npm run dev Or yarn dev for development

npm run production or yarn production for production.

What will happen when you will run npm run dev . Simply Laravel Mix will compile the JavaScript and CSS files that have to be used in application.

Laravel Mix file must look like

....
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Here, we can simply get that resources/js/app.js file will be compiled to public/js/app.js file and resources/sass/app.scss file will be compiled to public/css/app.css file.

Now you can use the bootstrap inside your layout file and use all of its component and utilities for designing your application.

Using In Blade

Since scss file is being compiled to css inside public folder you can simply use for embedding inside view file.

<link rel="stylesheet" href="{{ asset('css/app.css')  }}">

Override Default Classes

Most of the cases we are comfortable with the default bootstrap classes. But in case we need to override some of the properties of the bootstrap classes then we can add _custom.scss file in sass directory along with app.scss and import that in the app.scss below bootstrap imports so the file must look like:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

@import "custom";

and _custom.scss may look something like

.navbar{
    background-color: $cyan !important;
}

Yes your guess is correct, now the color of the navbar will be cyan.

Watching Changes

You may need to run npm run watch for watching changes in js and scss file and compile them to css file instead of running npm run dev time and again.

Thank you.