How to install bootstrap in laravel 8
Stefan Izdrail
Founder & Senior Architect · 2026-06-29
As the developer community continues to evolve, so do their technologies and processes. In the case of Laravel 8, you've noticed that laravel/ui is no longer recommended for installing Bootstrap. While it was a handy solution in earlier versions, things have changed. This comprehensive guide aims to provide a clear path on how to seamlessly integrate Bootstrap into your Laravel 8 applications.
Step 1: Install Bootstrap's CDN
To start with, you need to utilize Bootstrap's Content Delivery Network (CDN) instead of installing the framework locally. This will simplify future updates and management, as well as ensure that your application operates smoothly without local dependencies.http://bootstrapcdn.com/ or https://cdn.jsdelivr.net/ are two popular Bootstrap CDN sources that you can use in Laravel. Add the below code snippet to your application's layout file (usually resources/views/layouts/app.blade.php) or where you want Bootstrap CSS to be loaded.
// Add this line after opening <head> tag
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0v2IP9RqcsEnOC0VXJCNmfOpQS1zjAE MGE/XHQ7P/5KuwkGY/OdDExmpCruweg/XxA4nkEQ" crossorigin="anonymous" />
Step 2: Add Custom CSS or JavaScript Files
If you're planning to add any custom CSS changes or additional JavaScript files, do so within your layout file. This ensures that all assets are loaded correctly and consistently throughout the application.resources/views/layouts/app.blade.php
@extend('layouts.master')
@section('stylesheets')
@show
@section('scripts')
@show
Step 3: Organize Your Assets for Easy Management
Create a dedicated folder to store your application's assets like CSS, images, and JavaScript. This helps maintain a clear structure and enables efficient development and maintenance.public/assets
css for your custom stylesheets
- js to store JavaScript plugins or libraries related to Bootstrap, or your custom scripts
- img for images and other media assets
Step 4: Create a Custom Component for Bootstrap Elements
To improve code organization, create a dedicated Laravel Blade component for each Bootstrap element you need. This allows for easy customization and maintenance while minimizing repetitive coding tasks.app/Http/Livewire/Components/BootstrapButtonComponent.php
namespace App\Http\Livewire\Components;
use Livewire\Component;
class BootstrapButtonComponent extends Component
{
public $color = 'primary';
public function render()
{
return view('components.bootstrap-button')
->with([
'label' => $this->label,
'color' => $this->color,
]);
}
}
resources/views/components/bootstrap-button.blade.php
<div class="btn btn-{{ $color }}"></div>
Label: {{ $label }}
@livewireScripts
@component('components.bootstrap-button', ['color' => 'primary', 'label' => 'Click Me'])
@slot('label')
This is a nice button
@endslot
@endcomponent