MENU

How to install Bootstrap5 in Laravel8

Laravel8講座

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.

日本語での説明 

目次

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.

VersionLaravel Version
1.x5.8, 6.x
2.x7.x
3.x8.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>

Access via browser

when I accessed http://localhost:8000/. I can see bootstrap like UI.

When I access a unadopted page, the UI is old age’s one.
so I confirmed it works well.

Thant’s all
Thank you for reading this article.
Have a nice day!

[Laravel8] Bootstrap4 から5への移行
よかったらシェアしてね!

この記事を書いた人

コメント

コメントする

目次
閉じる