やったこと

Rails5 で Bootstrap4 を設定する方法を調べました。

確認環境

$ ruby -v
ruby 2.5.0p0 (2017-12-25 revision 61468) [x86_64-darwin17]

$ rails --version
Rails 5.2.3

調査

gem のインストール

どのバージョンか忘れましたが、今回より古いバージョンの時はインストールが必要だった気がしたのですが、元から入っているようです。

bootstrap-sass がインストールされていればOKです。

Gemfile.lock

     bootstrap-sass (3.3.7)
       autoprefixer-rails (>= 5.2.1)
       sass (>= 3.3.4)

ここでちょっと注意です。 4系に対応するには、違うgemを使います。

このままではあまり面白くないので、4系を入れてみます。 インストール手順は github の通りですが、とにかくやってみます。

Gemfile

gem 'bootstrap', '~> 4.3.1'

$ bundle install

端折りますが、下記を参考にしてください。

ruby のバージョンを上げてから、bundle install でコケた時にやること – ためすう

ファイルの編集

ファイルの拡張子を scss にします

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

app/assets/stylesheets/application.scss

上記ファイルを編集して、bootstrap を読み込みます

@import "bootstrap";

Boostrap4 の機能を使ってみる

表示したい view ファイル

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked=""> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
</div>

※ もし反映されない時はサーバーを再起動などしてみてください（もちろん開発環境で）

最後に

もし、bootstrap-sass を使わないなら、削除しておいても良いかもしれませんね。

参考

Bootstrap 4 Cheat Sheet by Creative Tim and BootstrapBay

これ見ながらやると捗ります。