shou2017.com
JP / EN

rails5でBootstrap4を使う

Fri Nov 24, 2017
Sat Aug 10, 2024

手順1

#bootstrap4をインストール
gem 'bootstrap', '~> 4.0.0'

#rails5.1以降はデフォルトでjQueryがインストールされてないのでインストール
gem 'jquery-rails'

bundle install

手順2

app/assets/stylesheets/application.cssapp/assets/stylesheets/application.scssに変更

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

手順3

app/assets/stylesheets/application.scssrequire_tree .require_selfを削除

@import “bootstrap”を最終行に追加。

全体はこんな感じ。

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 * *requireは使わない
 * require_tree .
 * require_self
 */
 // Custom bootstrap variables must be set or imported *before* bootstrap.
  @import "bootstrap";

手順4

application.jsに下記を追加。

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

おわり。

See Also