Reading Time: 4 minutes

194 Views

Bootstrap 5, the popular front-end framework, introduces numerous features and enhancements for creating modern, responsive web applications. Integrating Bootstrap 5 into Laravel 10 enhances the visual appeal and responsiveness of web interfaces.

Laravel, recognized for its robustness and flexibility, seamlessly integrates with Bootstrap, offering a powerful combination for web development.

Bootstrap 5’s extensive utility classes, components, and grid system simplify the creation of responsive layouts and intuitive user interfaces.

Let’s get started.

Laravel Installation

Open terminal and run this command to create a laravel project.

composer create-project laravel/laravel myblog

It will create a project folder with name myblog inside your local system.

To start the development server of laravel –

php artisan serve

URL: http://127.0.0.1:8000

Assuming laravel already installed inside your system.

Steps To Install Bootstrap to a Laravel Application (Using NPM)

There are few steps which you need to follow to install bootstrap 5 into laravel application.

Step #1

You need to install laravel/ui package.

composer require laravel/ui

Step #2

Add Bootstrap library using laravel/ui

php artisan ui bootstrap

Step #3

Install Bootstrap Icon

npm install bootstrap-icons

Now, import icon css on resources\sass\app.scss,

File 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';

Step #4

Build CSS and JS File. Run these commands step by step to your project terminal.

npm install
   
npm run build

Using Bootstrap To Application

Now, we can work on any of blade template file and use bootstrap class.

<!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" style="margin-top:10px;">
        <main class="container">
            <h3 class="text-center"> How to Install Bootstrap 5 in Laravel 10 - Online Web Tutor</h3>
            <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>

Application Testing

Run this command into project terminal to start development server,

php artisan serve

Once you execute your program you will get as,

How To Add Bootstrap Library Using CDN

Alternatively, you can include Bootstrap 5 directly in your HTML layout using a Content Delivery Network (CDN). Add the following links in your HTML layout file.

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

That’s it.

We hope this article helped you to learn about How To Install and Work with Bootstrap 5 in Laravel 10 in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.