RailsへのBootstrap導入方法 備忘録
1. Gemfile
Gemfileに以下4点を追加する
gem "sass-rails", "~>5.0"
gem "bootstrap-sass", "~>3.3.6"
gem "jquery-rails"
gem "jquery-ui-rails"

2. bundle update
ターミナルにて bundle update を実行
3. csccファイル変更
ファイル名変更
/app/assets/stylesheets/application.css から
/app/assets/stylesheets/application.scss へ
末に以下2点を追加
@import "bootstrap-sprockets";
@import "bootstrap";

/app/assets/javascripts/application.js
以下2点を追加(図では13、18行目)
//= require jquery
//= require bootstrap-sprockets

実際に使ってみる
https://getbootstrap.com/
今回はGemfileにてversion3系を指定したので、v3.3.7 を選択

使いたいデザインを探して…

htmlにclassを適用する


無事にデザインが反映されました