RailsでBootstrapを導入する

Bootstrapとは

Railsにはデフォルトで特定のデザインを含んでいません。
そのため見栄えの良いアプリケーションを作るには、一から自分でデザインしなければいけません。
Bootstrapというフロントエンドワークを使えば、手軽に見栄えの良いページを作ることができるようになります。

gemfileにbootstrapとjqueryのgemを追加します。 BootstrapはjQueryに依存するため、jquery-railsもGemfileに追記する必要があります。

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

※gemを追加するときコメント等で区切りのない段落では、gemの記載はアルファベット順にします。

assets/stylesheets/application.cssファイルに下記を追加します。

@import 'bootstrap';
@import 'font-awesome-sprockets';
@import 'font-awesome';

*= requireなどの記載が残っていると、@importで定義した内容がうまく読み込めずbootstrapが反映されないので注意が必要です。

assets/javascripts/application.jsファイルに下記に記載があるか確認します。
//= require_tree . は一番下の行に記載するようにします。

//= require jquery3
//= require popper
//= require bootstrap