The Preferred way of using Bootstrap with Laravel 7
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
OR
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.