In this tutorial you will learn about the How to install Bootstrap 4 in Laravel 8 and its application with practical example.
How to install Bootstrap 4 in Laravel 8
In this article, you will learn you how to install bootstrap 4 in laravel 8, I’ll show you how install bootstrap 4 in laravel 8. In this step by step laravel 8 install bootstrap 4 tutorial. you will understand to install bootstrap 4 in laravel 8.
Install Laravel Project
|
1 |
composer create-project laravel/laravel --prefer-dist laravel-bootstrap |
Install Laravel/UI
Now, switch the laravel project directory and run the following composer command to install laravel/ui package. Laravel UI is an official library that offers selective or predefined UI components. The laravel/ui package comes with the login and registration scaffolding for React, Vue, jQuery, and Bootstrap layouts.
Run the following composer command to install Laravel/UI.
|
1 |
composer require laravel/ui |
Install Bootstrap 4 In laravel 8
Run following artisan command to install Bootstrap in your Laravel project.
|
1 |
php artisan ui bootstrap |
Install Bootstrap Auth Scaffolding
Use the following artisan command to Install the auth scaffoldings with Bootstrap.
|
1 |
php artisan ui bootstrap --auth |
Now, you have successfully installed bootstrap in your laravel 8 project, you can see your resource directory js folder.
Install Bootstrap Packages
Now, you need to install the bootstrap package and the related frontend dependencies such as jquery from npm using the following command:
|
1 |
npm install |
Run NPM
Now, run the below command for asset compilation.
|
1 |
npm run dev |
The above command compiles CSS and JavaScript files from resources/js and resources/sass folder to the public folder.
How to use Bootstrap in Laravel Blade Template
Now, you can use the bootstrap js and CSS in laravel blade template as following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html> <head> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <h1>This is example.</h1> </body> </html> |
