Rails5.2で Bootstrap4を導入する
Gemfileの編集
BootstrapのJSの機能を使うにはjQueryが必要です。
Rails5.2ではjQueryはデフォルトで読み込まれていないのでこちらもgemでインストールします。
GemfileにjQueryとBootstrap4を読み込む記述をます。
gem 'jquery-rails'
gem 'bootstrap', '~> 4.3.1'
保存し、インストールを行ってください。
$ bundle install
application.jsの編集
Bootstrap4で必要なJavaSctiptを読み込む記述を行います。
jQueryのバージョンはBootstrapで必要な3を読み込みます。
popperというjsライブラリはツールチップやポップオーバーで使うためのライブラリです。こちらが必要なければ読み込まなくても大丈夫です。
app/assets/javascripts/application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//この行より下は既に記載済みです。
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
既に記載のあるrequire rails-ujsの上に3行追加してください。
最初にjQueryの読み込みがないとうまく動作しません。順番は間違えないようにしてください。
cssファイルのrenameと追加
既存のapplication.cssファイルの拡張子をscssにリネームしてください。
変更後、以下行を追加してください。
app/assets/stylesheets/application.scss
@import "bootstrap";
Tips!
application.cssファイルとapplication.scssは一緒に作成しないでください。このファイルが2つあると正しく動作しない可能性があります。
サーバを再起動
もしWebサーバが起動中の場合はサーバを再起動してください。
以上でBootstrap4の導入が完了となります。