窓際BLOG

プログラミングの学習メモや書籍の感想等を公開していきます。

RubyonRails:Rails5アプリケーションにBootstrap4を導入する

みなさん、こんにちは。まどぎわです(._.)

最近、作成しているRailsアプリケーションにBootstrap4を導入してみたので、その手順をメモしておきますφ(..)

手順

環境情報

試した環境を下記に記述しておきます。

gem version
rails 5.1.4
bootstrap 4.0.0

Gemのインストール

Gemfileに下記を追記し、bundle installを実行します。

gem 'bootstrap', '~> 4.0.0'
gem 'jquery-rails'

ちなみに、sprockets-railsv2.3.2.以上がインストールされている必要があります。
確認方法は下記の通りです。

$ bundle show |fgrep sprockets-rails 
  * sprockets-rails (3.2.1)

application.js、application.cssの編集

application.jsは、下記のように編集します。

// 省略
//= require rails-ujs
//= require jquery3 // 追記
//= require popper // 追記
//= require bootstrap-sprockets // 追記
//= require turbolinks
//= require_tree .

application.cssは、application.scssにリネームし、下記のように修正します。

// 省略
 *= require_tree .
 *= require_self
 */
 @import "bootstrap"; // 追記

FontAwesomeのインストール

最後にIconを使用するためにFontAwesome(ver 4.7.0)を導入します。

下記のようにapplication.html.erbに追記すれば、OKです。

# haml
= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
# erb
<%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" %>

サンプル

f:id:madogiwa0124:20180312005054p:plain

参考資料

github.com

qiita.com

以上です。