Edited at

Railsアプリで Bootstrap 4 を利用する

rails-bootstrap.png


注意点

本投稿ではWebpackerがインストールされてないRails5以前のアプリを対象にBootstrap4を導入する手順を掲載しております。

Webpackerが標準となったRails6アプリにBootstrap4を導入する際には以下の記事がとても参考になりました🙇‍♂️

RailsでBootstrapとFont-AwesomeはWebpackerで今時っぽく使おう - Qiita


はじめに

Bootstrap 4のComponentsの中にちょうど使いたいと思っていた部品があったので、Bootstrap 4をRailsに導入する手順を確認しました。


公式サイト

Bootstrap · The most popular HTML, CSS, and JS library in the world.


注意点

投稿時点でのBootstrapのバージョンはv4.0.0-beta.2 4.1.1です。


gem

これまでrailsにBootstrapを導入する際にはbootstrap-sassを利用してましたが、READMEに「Bootstrap 4ではbootstrap-rubygemを利用してね」と案内がありました。

Bootstrap
Gem
GitHub

2~3
bootstrap-sass
twbs/ bootstrap-sass

4
bootstrap
twbs/ bootstrap-rubygem


導入手順

bootstrap-rubygemのREADME通りに進めていきます。


Gemfile

Gemfileでbootstrapを指定してインストールする。

BootstrapはjQueryに依存するため、(デフォルトでjQueryがインストールされない)Rails5.1以上ではjquery-railsもGemfileに追記する。


Gemfile

gem 'bootstrap', '~> 4.1.1'

gem 'jquery-rails'

$ bundle install

注意点

sprockets-railsv2.3.2.以上である必要がある。


`sprockets-rails`バージョン確認方法

$ bundle show |fgrep sprockets-rails

* sprockets-rails (3.2.1)


application.scss

Railsアプリの作成時に生成されるapplication.cssapplication.scssにリネームするなどして、.scss(Sass構文の場合は.sass)ファイルを用意する。

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

app/assets/stylesheets/application.scssでbootstrapをimportさせる。


/assets/stylesheets/application.scss

// Custom bootstrap variables must be set or imported *before* bootstrap.

@import "bootstrap";

注意点

- Sassファイルでは*= require*= require_treeを削除する

- Sassファイルではインポートに@importを利用する

- Sassファイルで*= requireを利用すると他のスタイルシートではBootstrapのmixinや変数を利用できなくなる


application.js

Bootstrapと依存関係をapplication.jsに追記する


app/assets/javascripts/application.js

//= require jquery3

//= require popper
//= require bootstrap-sprockets

補足

- Bootstrapのtooltipsやpopoverはpopper.jsに依存している

- bootstrapの依存gemにpopper_jsが指定されているため新たにインストールは不要

- コンパイルを高速化したい場合はbootstrap-sprocketsの代わりにbootstrapを指定する


さいごに

Bootsrap3のサイトで利用していたコードを今回構築したBootstrap4環境に適用してみました。見た目に大きな変化はありませんが、4のほうが色合いが鮮やかですね。

bootstrap3-4.png