Does laravel work with bootstrap?

Question

Compared to the previous version of Laravel where Bootstrap Framework was the default pre-installed frontend option. In the latest version there have been a lot of changes in the Laravel Framework wherein you have to perform certain steps to use Bootstrap as the frontend framework.

Table of Contents Show

Install Laravel / ui package
Install Bootstrap
Install and Run NPM
How to Install Bootstrap in Laravel 9?
Install Laravel Project
Install Laravel UI
Generate Scaffolding
Installing Bootstrap Packages
Use Bootstrap in Theme
Medium Articles:
Does Laravel 8 support bootstrap?
Can I use bootstrap and vue in Laravel?
How does bootstrap 5 integrate with Laravel?
HOW include bootstrap JS in Laravel?

Following are the steps to use Bootstrap 4 with latest version of Larvael

Install Laravel / ui package

Run the following command to install Laravel's laravel/ui package

composer require laravel/ui

Install Bootstrap

Once you have installed the laravel / ui package, you can now install the Bootstrap framework by running the following comand

php artisan ui bootstrap

If you are looking to generate auth scaffolding as well, then you should run the following command instead

php artisan ui bootstrap --auth

Install and Run NPM

Now that we have generated the Bootstrap scaffolding, next up we need to install and run the NPM so that the bootstrap library is compiled

Run the following command to install NPM

npm install

Run the following command to compile the resources

npm run dev

Now you can use Bootstrap's compiled JS and CSS in your application.


<!doctype html>
<html>
<head>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
   
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <h2>This is example Bootstrap page</h2>
</body>
</html>

June 25, 2022, Originally published at laraveltuts.com・3 min read

Hello there, Dev. This quick tutorial will show you how to Install Bootstrap in Laravel 9 (2022). You will learn how to implement bootstrap into Laravel. You can find out how to install Bootstrap 5 in Laravel 9 here. You can grasp an idea of how to install a Bootstrap 4 in Laravel. Let us begin with Laravel install a bootstrap 5.

Bootstrap can be installed with Laravel 6, Laravel 7, Laravel 8, and Laravel 9.

In this tutorial, I will show you how to install a bootstrap correctly in your Laravel application. For adding bootstrap npm to a Laravel application, we will use the Laravel ui package. Laravel ui is a composer package made available by Laravel.

So, let’s take the following steps:

How to Install Bootstrap in Laravel 9?

Step 1: Install Laravel Project
Step 2: Install Laravel UI
Step 3: Generate Scaffolding
Step 4: Installing a Bootstrap Packages
Step 5: Use Bootstrap in Theme

https://m.do.co/c/0747e21b177e

Install Laravel Project

First and foremost, we must obtain a new Laravel 9 version application by using the command listed below. So, launch your terminal OR command prompt and type the following command:

composer create-project laravel/laravel example-app

Install Laravel UI

Let’s run the following command to install the Laravel UI Package:

composer require laravel/ui

Generate Scaffolding

Then, Install the laravel UI package command to create auth scaffolding.

The following command will only add bootstrap in your app.

php artisan ui bootstrap

The following command will add bootstrap along with Auth Scaffolding.

php artisan ui bootstrap --auth

Installing Bootstrap Packages

We must first install npm and then download the bootstrap packages.

Let’s run the following command to install npm:

npm install

On the resources/sass folder, you can see the Compile asset on _variables.scss and app.scss files.

resources/sass/app.scss

/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Nunito');  /* Variables */
@import 'variables';
  /* Bootstrap */
@import '~bootstrap/scss/bootstrap';

Next, we must execute the following command for asset compilation:

/* for development */
npm run dev  /* for production */
npm run production

It creates CSS and JS min files.

Also Read : How to Install Alpine.js in Laravel 9

Use Bootstrap in Theme

You can use the following code to compile CSS and JS files on the theme blade file:

<!doctype html>
<html>
<head>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>       <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <h2>This is example from LaravelTuts.com</h2>
</body>
</html>

Run Laravel App:

After you have completed all of the necessary steps, type the following command and press enter to run the Laravel app:

php artisan serve

Now, Enter the following URL into your web browser and view the app output:

http://localhost:8000/

Also Read : How to install Selectize.JS in Laravel 9

Now you can see the layout as follows:

Home Page:

Login Page:

Register Page:

Dashboard Page:

Conclusion

In this practical, we covered an important concept related to Bootstrap and learned how to Install a Bootstrap in Laravel 9.

Also Read : Autocomplete Search using jQuery UI in Laravel 9

Medium Articles:

Create a custom WordPress Plugin from scratch (2022)
Create CRUD Application with Laravel and Vue.js
How to Login with Google in PHP
Install ReactJS in Laravel 9 Tutorial
Codeigniter 3 and AngularJS CRUD with Search and Pagination Tutorial
PHP Chunk File Upload using JavaScript

Does Laravel 8 support bootstrap?

Does Laravel Use bootstrap? Laravel 8 provide easy way to work with bootstrap, vue and react, The bootstrap directory contains the app. php file which bootstraps the framework.

Can I use bootstrap and vue in Laravel?

Install Bootstrap and Vue If you are using Laravel, first install the Laravel composer package- laravel/ui that is already built for you. To do that, just open a terminal from your project root directory, and run: composer require laravel/ui. php artisan ui vue --auth.