MENU

【Laravel8】Bootstrap5をインストールして使ってみる

Laravel8講座

今回Laravel8でBootstrapをインストールする方法を解説します。

LaravelはBootstrapをサポートしていることもあり簡単にインストール、使用することができます。

是非この記事を読んでBootstrapをインストール、使ってみてください。
※バージョンを指定しなければBootstrap5の最新バージョンがインストールされます。

それではまずは簡単にBootstrapについて説明していきます。

目次

Bootstrapについて

世界で一番人気のフロントエンドライブラリ。
ユーザーの見た目に関するところ、
スマホやPC、タブレット等デバイスによる表示の出し分け等を
ライブラリでよしなにやってくれます。

これがない時は、
Webサイトを作るのにデバイスごとの出し分けというのは、
大きな課題でかつ工数がかかるものでした。

ブラウザ、デバイスごとの出しわけもBootstrapを使うことによりかなり楽になってきています。

例えば入力フォームを例にすると、入力フォームを作る際はPCやスマホ、
タブレットなどデバイスや画面サイズによって最適の入力フォームのサイズが異なります。

今まではデバイスや画面サイズごとに入力フォームのサイズを定義し作成していましたが、
BootstrapでHTMLのフォームタグと
Bootstrapのスタイルを挿入すればよしなにデバイスごとにより入力フォームのサイズ、
デザインを出し分けてくれます。

参考 Bootstrapの公式ページ

次はLaravelとBootstrapの関係について少し触れたいと思います。

LaravelとBootstrapについて

LaravelとBootstrapについてですが

LaravelではLaravel UIというフロントエンド用のパッケージが用意されています。
パッケージではVue、React、Bootstrapが対応していて、
それぞれのフレームワークを簡単にインストールまたは利用することができます。

BootstrapはLaravelでサポートされているので扱いも簡単ということが言えます。

Bootstrap インストール方法

インストール方法は簡単です。

まずはlaravel/uiのパッケージを使えるようにします。

Composerコマンド実行

composer require laravel/ui

コマンドを叩くと
composer.jsonファイル、requireの最後にlaravel/uiが追記されましたね。
^3.4はパッケージのバージョン番号です。
インストール時期によってバージョンは異なると思いますが気にしなくてOKです。

“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”
},

今回インストールされるlaravel/uiのパッケージのバージョンは3.X系です。
Laravelのバージョンによってインストールされるバージョンが違います。

VersionLaravel Version
1.x5.8, 6.x
2.x7.x
3.x8.x
引用元 https://github.com/laravel/ui

Bootstrapをインストール&ビルド

Bootstrapをインストール&ビルドします。

uiパッケージの中にあるBootstrapをインストールしますって感じです。

php artisan ui bootstrap
npm install && npm run dev

npmのコマンドが使えないエラー(zsh: command not found: npm)が出たら.bashrcを読み込みましょう

source ~/.bashrc

途中npmのバージョンが古いと警告が出てインストールできないことがあります。
画面の指示に従いnpm、関連ライブラリのバージョンアップをしましょう。

※補足
Additional dependencies must be installed. This will only take a moment.

こんな案内が出たらもう1度 npm run devのコマンドを実行しましょう。
この警告、案内の内容はLaravelをインストールした時期によっても違いそうです。
うまくいかない時はターミナルに出ている案内をよく読んでください!!

  Running: npm install resolve-url-loader@^4.0.0 –save-dev –legacy-peer-deps

  Finished. Please run Mix again.

これでbootstrapが使えるようになっていると思います。

http://127.0.0.1:8000/css/app.cssにCSSらしきものが見えればOK!!

package.jsonにもBootstrapが追加されていると思います。
“bootstrap”: “^5.1.3”

LaravelサーバーでBootstrap動作確認

ではフロントでBootstrapを使ってみて動くことを確認しましょう。

テンプレートファイル編集

resources/views/welcome.blade.phpを編集します。
※welcome.blade.phpはLaravelをインストールしたときにデフォルトで
http://localhost:8000/にアクセスしたときに読み込まれるテンプレートなので今回使っています!


他すでに使えるテンプレートがあればそのファイルで試してみてもOKです。

例のHTMLはBootstrap5の公式ページから引用 
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>

ブラウザからアクセス

http://localhost:8000/ にアクセスしたらBootstrapらしいUIが表示されました。

Bootstrapを入れていないPJで同じコードを使うとインターネット黎明期のようなUIになったのでちゃんとインストールされているようです


Bootstrapが反映されない時

動作確認手順をしてみてもBootstrapっぽいイケてるデザインではなく、
昭和風の古いHTMLしか表示されない時のトラブル対処法です

Bootstrapインストールした時に生成されたCSSが読み込まれているかチェック

http://127.0.0.1:8000/css/app.css 
このファイルを読み込んだときに404が出たらインストール失敗している可能性が高いです。
インストール手順を見直しましょう。
エラーを見逃している可能性があります。
もう一度やってみましょう。

HTMLがBootstrap4系、5系異なっている

Bootstrapの4系と5系ではCSSのスタイル名が異なっているものもあります。
どこからかコピペしてきたHTMLを使った場合Bootstrap4系のHTMLを使っている可能性があります。

まずは上のサンプルのHTMLを使って試してみてください。

参考 

あわせて読みたい
【bootstrap5と4】CSSクラス名の違い 【はじめに】 自サイト修正のためにBoostrapの公式サイトを見ながら対応していたのですがどうしてもスタイルが効かずにハマったので備忘録として書きます。 【何をして...

関連記事

あわせて読みたい
[Laravel8] Bootstrap4 から5への移行 【この記事について】 Laravel8を使ってBootstrap4から5への移行方法を知りたいという人に向けて書いています。BootstrapはUIをよしなに良く表現してくれる良いライ...
Laravel8 Bootstrap4から5への移行
よかったらシェアしてね!

この記事を書いた人

コメント

コメントする

目次
閉じる