rails5でBootstrap4を使う

1
2
3
4
5

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

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

1

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/*
 * 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";

1
2
3

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