Railsアプリに”Bootstrap 4″を導入する【Ruby on Rails】

はじめに

Railsアプリケーション作成において、とっても便利なBootstrap。

少し前まで Bootstrap3 を利用していましたが、今回 Bootstrap4 を導入してみたのでまとめておきます。

なお、一応 scaffold で作成したシンプルなアプリに導入します。

とりあえず超簡単なアプリを作ってみる【Ruby on Rails】

環境

  • Windows Subsystem for Linux (Ubuntu 18.04)
  • Rails 5.2.0
  • Ruby 2.5.3

必要な知識・準備

  • Linuxの超基本的なコマンド(cd, mkdirなど)を知っているもしくは調べて理解できること。
  • rubyの導入が終わっていること。

導入手順

STEP.1
gemをbundle installする
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
bundle install

上記のgemをbundle installします。

また、`sprockets-rails`の バージョンがv.2.3.2. 以上でなくてはならないらしいのでチェック しておきましょう。
(以下のコマンドで確認できます)

bundle show |fgrep sprockets-rails

今回は`* sprockets-rails (3.2.1)`と返ってきました。古いアプリでなければ大丈夫でしょう。

STEP.2
application.cssをリネームする

app/assets/stylesheets/application.cssapplication.css.scssにリネーム(名前の変更)しましょう。

要は後ろに.scssを付け足すだけです。

STEP.3
application.css.scssを書き換える
@import "bootstrap";

もともといろいろ書いてあるやつは消してこれ1行でOKです。

STEP.4
app/assets/javascripts/application.js に追記する
//= require jquery3
//= require popper
//= require bootstrap-sprockets

こちらはもとから書いてあるやつは何も触らず、その下に↑の3行を追記します。

STEP.5
railsアプリを再起動する
bundle exec rails s

assetsディレクトリ以下をいじっているので反映には再起動が必要です。

再起動忘れて悩むのはあるあるでした…。

STEP.6
Bootstrap4のクラスが反映されるかチェックする
<%= link_to 'New User', new_user_path, class: "btn btn-success" %>

私の場合はだいたいbtn btn-successあたりでちゃんと反映されることをチェックしてます。

もちろん何でも良いです。

↑の場合反映されていればこんなかんじ↓

MEMO

Bootstrap3 では使えていたのに Bootstrap4 では使えなくなっている(なくなっている)クラスもたくさんあります。

とくにボタンのbtn-defaultというのも無くなっていて、もともとコレが反映されるかどうかでチェックしていた私はずいぶん悩まされましたw

他にもたくさんのクラスに変更が加わっているので『おわりに』で紹介している公式ドキュメントをよくチェックしましょう。

完成!

おわりに

今回は Bootstrap4 の導入手順をシンプルにまとめました。

初学者にはとてもありがたいBootstrap、ぜひ導入してその恩恵にあずかりましょう。

参考 Bootstrap4移行ガイド

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください