Help us understand the problem. What is going on with this article?

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

NaokiIshimura
Ruby on Rails Engineer.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした