Even though there are many modern tools, Bootstrap helps us prototype responsive and modern web applications quickly.
In this guide, we will walk you through the process of installing and setting up Bootstrap in a Laravel application.
Installation Steps ➥
Install required packages:
npm install bootstrap @popperjs/core
Update resources/css/app.css:
@import 'bootstrap/dist/css/bootstrap.min.css';
Update resources/js/app.js:
import './bootstrap';
import 'bootstrap';
Update templates:
File: 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>{{ config('app.name') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">{{ config('app.name') }}</a>
</div>
</nav>
<main class="container py-4">
<main class="container py-4">
<h1>Welcome to {{ config('app.name') }}</h1>
</main>
</main>
</body>
</html>
Update the route
File: routes/web.php
Route::get('/', function () {
return view('welcome');
});
Build and install bootstrap:
npm run build
Run the development server:
php artisan serve
Visit the URL provided in the console, typically http://127.0.0.1:8000, to see the changes in action.
