Integrating Bootstrap into a Laravel application allows you to build clean, responsive user interfaces quickly using Blade template inheritance. Whether you are maintaining an existing project or setting up a lightweight custom layout, structuring your Blade views with Bootstrap CSS and JavaScript assets is straightforward.
Here is a step-by-step guide on how to integrate Bootstrap assets and build a reusable Blade master layout in Laravel.
Table of Contents
1. Downloading and Placing Asset Files
To use Bootstrap locally without relying on external CDNs, download the compiled CSS and JS files from the official Bootstrap website or pull them in via NPM/Composer.
Place your assets inside your public directory as follows:
- Place CSS files in:
public/css/bootstrap.min.css - Place JavaScript files in:
public/js/bootstrap.min.js - Place jQuery (required for Bootstrap JS components) in:
public/js/jquery.min.js
2. Creating the Reusable Master Blade Layout
In Laravel, template inheritance is handled using Blade directives. Create a master layout file at app/views/layouts/master.blade.php (or resources/views/layouts/master.blade.php depending on your framework version).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Laravel App')</title>
<!-- Bootstrap CSS -->
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
</head>
<body>
<!-- Main Navigation Container -->
<div class="container">
@yield('content')
</div>
<!-- Core JavaScript Dependencies -->
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
</body>
</html>
3. Extending the Layout in Your Content Views
Once your master template is configured, any application view can extend it and inject custom page content into the defined sections.
For example, in your home page view (e.g., hello.blade.php):
@extends('layouts.master')
@section('title')
Welcome to Laravel with Bootstrap
@stop
@section('content')
<div class="jumbotron">
<h1>Hello, World!</h1>
<p>This page is styled using Bootstrap inside a Laravel Blade template.</p>
</div>
@stop
4. Testing the Route Setup
Ensure your route file (app/routes.php or routes/web.php) serves the extended view:
Route::get('/', function() {
return View::make('hello'); // or return view('hello');
});
Note for legacy project maintainers: If you are maintaining legacy applications built on older Laravel releases, using standard static asset referencing inside Blade layouts remains the most reliable method when modern frontend build tools (like Vite or Laravel Mix) are not present.