Table of Contents
What you will read?
Bootstrap is a powerful front-end framework that helps developers create responsive and modern web applications. Integrating Bootstrap into Laravel 12 enhances your project’s design and makes the interface professional and mobile-friendly.
Step 1: Install Laravel UI Package
Start by installing the Laravel UI package, which provides a simple way to add frontend scaffolding like Bootstrap.
composer require laravel/uiStep 2: Install Bootstrap
Once the UI package is installed, run the following command to add Bootstrap support to your Laravel project.
php artisan ui bootstrapStep 3: Install Node Modules
Next, install the necessary npm dependencies to activate Bootstrap’s styles and scripts in your Laravel environment.
npm installStep 4: Compile Assets
Use Laravel Mix to compile your CSS and JS files so Bootstrap is properly integrated into your project.
npm run devStep 5: Verify Bootstrap Integration
After compiling, open your layout file to ensure Bootstrap’s CSS and JavaScript have been successfully included.
resources/views/layouts/app.blade.phpStep 6: Customize Your Design
Now that Bootstrap is active, you can design your Laravel 12 app using Bootstrap components and utilities.
<!-- resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 12 with Bootstrap</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="bg-light text-center p-5">
<div class="container">
<h1 class="text-primary mb-4">Welcome to Laravel 12 with Bootstrap</h1>
<button class="btn btn-success">Get Started</button>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
