Bootstrap is the most popular CSS framework for creating UIs. It has many predefined elements, so you can build beautifuly by combining existing elements. Also it has many CSS classes allowing you to configure block behavior without using pure CSS code.
In this article we will explain how to use Bootstrap with Laravel. There are a few ways to install Bootstrap. You can just add Bootstrap dist files from any CDN, but I consider it to be the wrong way. If something happens with CDN, your application won’t not work either. Or, you can install Boostrap using Laravel Mix. Let’s look at how to do it.
Table of Contents
How to Use Bootstrap with Laravel
I assume that you already have Laravel installed and configured. If not, read the article How to Install Laravel in Ubuntu 22.04.
1. Install Bootstrap
The package laravel/ui allows installing several UI components using Laravel Mix. For example, you can install Vue, React and of course, Bootstrap using this tool. First, install this package using the composer:
composer require laravel/ui
After this, you can install the required components. Run the following command to install Bootstrap:
php artisan ui bootstrap
If you also want to have a built-in Laravel authentication system, run this command instead of the previous:
php artisan ui bootstrap --auth
Bootstrap is already enabled in Laravel. If you add authorization routes and try opening one of the auth pages, you will see that Bootstrap works fine. But this is the case with the preinstalled Bootstrap. If you make any changes in the JS code and try to rebuild them, the build will fail.
You can see what changes the package did. By default loading scss files in webpack.mix.js is not configured. The command fixes it:
Also, make sure that bootstrap files have been imported in resources/scss/app.scss:
The Bootstrap framework has not only CSS files, but also JS. Open resources/js/bootstrap.js and make sure that Boostrap JS files importing is enabled:
In addition, you can open the resources/js/app.js file and comment on Vue initialization if you don’t want to use it. After this, use npm to install all the required packages:
npm install
Next, build JS and CSS assets using the following command:
npm run dev
Now, Bootstrap has been enabled, add generated assets to your layout file. By default, they are already present here:
You can create an example page to ensure that everything works fine. Create resources/views/example.blade.php file with this content:
@extends('layouts.app')
@section('content')
<div class="card ml-5 mr-5">
<div class="card-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
@endsection
And register an example route in routes/web.php:
Route::get('/example', function(){
return view('example');
});
Run a built-in Laravel web server:
php artisan serve
Now, you can open http://localhost:8080/example in the browser and see the rendered page:
2. Change the Version
As you can see, Laravel already has installed and configured. At this moment it is Bootstrap 5.1. But you may want to install another version. You can downgrade or upgrade the Bootstrap version using the NPM package manager. Let’s look at what versions are available:
npm view bootstrap versions
Next, you can install the required version using @ symbol after the package name. For example this command will install Bootstrap 4.6.2:
npm install bootstrap@4.6.2 --save
After this rebuild JavaScript assets:
npm run dev
3. Install JQuery
JQuery library usually goes closer with Bootstrap. You can use it to initialize many Bootstrap plugins or access page components. But it is not provided in Laravel by default. You should install it manually using the following command:
npm install jquery --save
After this add this line to the resources/js/bootstrap.js file:
window.$ = require('jquery');
It makes the JQuery variable ($) available for your scripts. After this, rebuild your assets:
npm run dev
Then you will be able to use JQuery ($) in your scripts and in the browser JS console.
4. Add Bootstrap From CDN
If you don’t want to use Laravel Mix, and prefer external CDNs, you can remove JavaScript and CSS assets from resources/views/layouts/app.blade.php and add Bootstrap resources directly to this file. You can find fresh CDN links on this page. For example, if you want to add Bootstrap 5.1.3, import CSS style in <head> block:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Then, import the required JS code:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Now, your layout file will look like this:
You can test that Bootstrap is working using the example page that was created above.
Wrapping Up
In this article we have explained how to install and use Bootstrap with Laravel. The simplest way – import Bootstrap files from CDN. But this method is not reliable. Your application will not work without an internet connection and may crash any time, when CDN changes the URL or removes old version that you use. The best way is to build the required assets from sources and place them with the application.
