How to install Bootstrap5 in Laravel8

2021年12月8日2021年12月23日

I’d like to explain how to install bootstrap in Laravel framework.
If you will not set a specific bootstrap version, it will be installed latest bootstrap version.

日本語での説明　

Contents

1. Relevance between Laravel and Boostrap
2. How to install Bootstrap
3. Test
- 3.1. Modify Template
- 3.2. Access via browser

Relevance between Laravel and Boostrap

Laravel has a Laravel UI package for front-end library.
Laravel UI package is supported Vue,React,Bootstrap.
So we can easily installed these library in Laravel framework.

How to install Bootstrap

Installation step is very simple.simple is the best.

First, enable laravel/ui package in laravel project.

you can run this command
composer require laravel/ui

after you run above command,
the library information (red text) was added in composer.json

“require": {
“php": “^7.3|^8.0",
“fruitcake/laravel-cors": “^2.0",
“guzzlehttp/guzzle": “^7.0.1",
“laravel/framework": “^8.65",
“laravel/sanctum": “^2.11",
“laravel/tinker": “^2.5",
“laravel/ui": “^3.4"
},

In this time, the package version of laravel/ui is 3.X.
The version is different by the version of your laravel PJ.

This table show what laravel/ui package version is installed.

Version	Laravel Version
1.x	5.8, 6.x
2.x	7.x
3.x	8.x

quote　https://github.com/laravel/ui

Next, install and build bootstrap
you can run these commands.
php artisan ui bootstrap
npm install && npm run dev

if you use old npm version, you see a warning about npm and stop installation.
Let’s see the explanation of your screen and install npm latest version.

after this, you can use bootstrap in your laravel project.

also you can check bootstrap was added in package.json

“bootstrap": “^5.1.3"

well done!

Test

Let’s use bootstrap and check.

Modify Template

Modify resources/views/welcome.blade.php
welcome.blade.php is already routed as default.
so I use this page for the test.

Of course, you can use another file if you have.
I quoted an sample HTML from Bootstrap official page
welcome.blade.php

<head>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>