fv17の日記

Webエンジニアの備忘用ブログです。主にWeb界隈の技術に関して書いています。

RailsにBootstrap3およびBootstrap4を導入する方法

gemを入れることですぐにできる。Bootstrap3か4を使うかで利用するgemが異なる。

Bootstrap3:bootstrap-sass gem
Bootstrap4:bootstrap gem

Bootstrap3を導入する

Gemfile

gem 'bootstrap-sass', '~> 3.3.7'
gem 'sass-rails', '>= 3.2'

app/assets/stylesheets/application.scss

application.scss に、あるいは独自のscssファイルを作成する場合は app/assets/stylesheets/custom.scss などとファイル作成し、先頭に次の2行を追加する。

@import "bootstrap-sprockets";
@import "bootstrap";

JavaScriptを必要とする機能を有効化する

app/assets/javascripts/application.js

//= require rails-ujs
//= require jquery  # 追加
//= require bootstrap  # 追加
//= require turbolinks
//= require_tree .

参照

github.com

Bootstrap4を導入する

公式doc

github.com

手順詳細の解説動画

medium.com

Qiita

qiita.com