こんにちは!とびろぐ管理人のとびうおです。
今回はLaravelにBootstrapを導入していきたいと思います!
![とびうおくん](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
今回はLaravelの中でも
Laravel10に導入していきたいと思います!
LaravelにBootstrapを導入する方法は2つ
LaravelにBootstrapを導入する方法は大きく2つあります。
- CDNという形で使う
- Laravel/uiを使用して使う
この2つの方法があります。
![とびうおくん](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
個人的にはCDNの方が楽で、初心者にはおすすめです!
慣れてきたらlaravel/ui等を使用していきましょう!
![LaravelにBootstrapを導入する](https://i0.wp.com/tobilog.net/wp-content/uploads/2023/04/image-20.png?resize=1024%2C438&ssl=1)
まずCDNで使う方法
では、始めにCDNでBootstrapを使用する方法について解説していきたいと思います。
![とびうおくん](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
cdnは簡単に使うことが
できるのでおすすめです!
![](https://i0.wp.com/tobilog.net/wp-content/uploads/cocoon-resources/blog-card-cache/89cb4477216dbcd390b3c9507d470820.png?resize=320%2C180&ssl=1)
上記のサイト通りに、cdnを使っていきます。
スターターテンプレートに書いてあるように、headのところに追加します。
css
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
![とびうおくん](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
これを追加するだけで、
bootstrapのcssを使用するとができます。
js
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
![とびうおくん](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
これを追加するだけで、
bootstrapのjsを使用することができます。
![LaravelにBootstrapを導入する](https://i0.wp.com/tobilog.net/wp-content/uploads/2022/12/image-10.png?resize=1024%2C525&ssl=1)
このような形にCDNを使って、Bootstrapのclassを簡単に使うことができます。
![](https://i0.wp.com/www19.a8.net/0.gif?resize=1%2C1&ssl=1)
Laravel uiを使用する
それでは次にLaravel uiを使用していきます。
Laravel uiを使用してインストールしていくには、以下のステップを踏む必要があります。
![LaravelにBootstrapを導入する](https://i0.wp.com/tobilog.net/wp-content/uploads/2023/04/image-21.png?resize=575%2C679&ssl=1)
Laravel/uiを使うには、まずcomposerを使用していuiコマンドが使用できるようにしていく必要があります。
composer require laravel/uiをする
まず最初にcomposer require laravel/uiをしていきます。
![LaravelにBootstrapを導入する](https://i0.wp.com/tobilog.net/wp-content/uploads/2023/04/image-23.png?resize=1024%2C741&ssl=1)
筆者の環境はlaravel 10でsailを使用しているので、以下のようなコマンドでlaravel/uiを使用します。
sail composer require laravel/ui
sailを使用していない場合は、
composer require laravel/ui
をしてください。
![とびうおくん](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
sailを使用しているのにも関わらず、
sailコマンドを使用しないと手元のphpのバージョンが反映されて
しまったりするので、注意してください!
このようにcomposer require laravel/uiをするとuiコマンドを使用することができるようになります。
uiコマンドでインストールをする
では、先ほど使えるようになったuiコマンドを使用してインストールをしていきましょう。
![LaravelにBootstrapを導入する](https://i0.wp.com/tobilog.net/wp-content/uploads/2023/04/image-26.png?resize=1024%2C658&ssl=1)
sail php artisan ui bootstrap
sailを使用していない場合は、
php artisan ui bootstrap
と打つと、Bootstrapを使用する準備ができました。
![とびうおくん](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
ここでも、自分がsailを使用しているかどうかというのを
間違えないようにしてコマンドを打ちましょう!
npm install & npm run devをする
では最後にnpm installとnpm run devをしていきます。
これが最後のステップです。
![LaravelにBootstrapを導入する](https://i0.wp.com/tobilog.net/wp-content/uploads/2023/04/image-25.png?resize=1024%2C695&ssl=1)
早速npm installをしていきましょう。
sail npm install
sailを使用していない場合は、
npm install
をします。
そして、
sail npm run dev
sailを使用してない場合は
npm run dev
を打ちます。
![とびうおくん](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
ここでもsailを自分が使っているかどうかを
自分で判断をして打つコマンドを決めてください!
なお、npm run devが何をしているかわからない方は以下の記事を読むことをおすすめします。
ここまでで、全ての工程をクリアしました。
この状態になったことでBootstrapがlaravelで使えるようになります。
bladeに以下の記述をしてください。
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
![とびうお<br>](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
npm run devでコンパイルしたcssをここでは読み込んでいるよ!
そうすることで、無事Bootstrapを使えるようになりました。
![](https://i0.wp.com/www19.a8.net/0.gif?resize=1%2C1&ssl=1)
![](https://i0.wp.com/www16.a8.net/0.gif?resize=1%2C1&ssl=1)
![](https://i0.wp.com/www12.a8.net/0.gif?resize=1%2C1&ssl=1)
まとめ
以上がLaravelでBootstrapを導入する方法です。
とびろぐではこれ以外にも多くのLaravelの記事を公開しているので、ぜひみてください!
![](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/81868173-E931-44CF-9D78-6BC5E095F433-2-scaled.jpg?resize=160%2C90&ssl=1)
コメント