Published - | Updated - June 26, 2023 03:14 am
102 Views
Hi dev,
Today, i show you bootstrap 5 install in laravel 10. This article will give you simple bootstrap 5 install in laravel 10. you will bootstrap 5 install in laravel 10. In this article, we will implement a bootstrap 5 install in laravel 10.
So, let’s follow few steps to create example of bootstrap 5 install in laravel 10.
Laravel 10 Install
Follow This Command And Install Laravel
composer create-project laravel/laravel blog
Install Laravel UI Package
following command:
composer require laravel/ui --dev
Install Bootstrap Auth Scaffolding
following command:
php artisan ui bootstrap --auth
Install Bootstrap Icon
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';
Build CSS & JS File
In this step, we will build css and js file. so, let’s run following two commands:
npm install npm run build
Use 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') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<style type="text/css">
i{
font-size: 50px;
}
</style>
</head>
<body>
<div id="app">
<main class="container">
<h1>Install Bootstrap 5 in Laravel 10 </h1>
<div class="card">
<div class="card-header">
Icons
</div>
<div class="card-body text-center">
<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>
</main>
</div>
</body>
</html>
Run Laravel App:
php artisan serve
Now, Go to your web browser, type the given URL and view the app output:
http://localhost:8000/
I hope it will assist you…