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.
Next, install and build bootstrap
you can run these commands.php artisan ui bootstrapnpm 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!
コメント