How to Install Bootstrap 5 in Laravel 11 with Vite
Hello, Laravel Web developers! In this article, we'll see how to install Bootstrap 5 in laravel 11 with Vite. Here, we'll install Vite in laravel 11 with Bootstrap 5. Vite is a modern front-end build tool that provides an extremely fast development environment and bundles your code for production.
Laravel integrates seamlessly with Vite by providing an official plugin and Blade directive to load your assets for development and production.
If you are developing a Single Page Application (SPA), including those developed with tools like Inertia, Vite will be the perfect fit.
Laravel 11 Install Bootstrap 5 with Vite
In this step, we'll install the laravel 11 application using the following command.
composer create-project laravel/laravel example-app
Next, we'll install the laravel UI package to install Bootstrap with auth.
composer require laravel/ui
Then, we'll install bootstrap 5 using the following command.
php artisan ui bootstrap
Now, we'll install the bootstrap icon using the following command.
npm install bootstrap-icons --save-dev
resources/sass/app.scss
/* Fonts */
@import url('https://fonts.bunny.net/css?family=Nunito');
/* Variables */
@import 'variables';
/* Bootstrap */
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons.css';
Then, we'll build CSS & JS using the following command.
npm install
npm run build
Next, we'll update the welcome.blade.php file and use the bootstrap class.
resources/view/welcome.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }} - Techsolutionstuff</title>
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<style type="text/css">
i{
font-size: 50px;
}
</style>
</head>
<body>
<main>
<div class="container py-4">
<header class="pb-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
<span class="fs-4">How to Install Bootstrap 5 in Laravel 11 with Vite - Techsolutionstuff</span>
</a>
</header>
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Laravel/Vite Bootstrap 5 Example</h1>
<p class="col-md-8 fs-4">This simple jumbotron example is based on one of the official Bootstrap 5 examples.</p>
<a class="btn btn-primary btn-lg" href="https://getbootstrap.com/docs/5.3/examples/jumbotron/">
View on getbootstrap.com
</a>
</div>
</div>
<div class="row align-items-md-stretch">
<div class="col-md-6">
<div class="h-100 p-5 bg-body-tertiary border rounded-3">
<h2>Some borders</h2>
<i class="bi bi-bag-heart-fill"></i>
<i class="bi bi-app"></i>
<i class="bi bi-arrow-right-square-fill"></i>
<i class="bi bi-bag-check-fill"></i>
<i class="bi bi-calendar-plus-fill"></i>
</div>
</div>
</div>
<footer class="pt-3 mt-4 text-body-secondary border-top">
© {{ date('Y') }}
</footer>
</div>
</main>
</body>
</html>
Now, run the laravel 11 application using the following command.
php artisan serve
You might also like:
- Read Also: How to Install php-zip Extension in Ubuntu 24.04
- Read Also: How to Add Bootstrap 5 Datatable Example
- Read Also: Bootstrap Session Timeout Example In Laravel
- Read Also: How to Enable Range Selection in Bootstrap 5 Datepicker
