Using Bootstrap 4 with Rails 5

Step 1

# Install Bootstrap 4
gem 'bootstrap', '~> 4.0.0'

# Since jQuery is not installed by default in Rails 5.1 and later, install it
gem 'jquery-rails'

Then run bundle install.

Step 2

Rename app/assets/stylesheets/application.css to
app/assets/stylesheets/application.scss.

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

Step 3

Remove require_tree . and require_self from app/assets/stylesheets/application.scss.

Add @import "bootstrap"; at the end.

The complete file should look like this:

/*
 * 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.
 * *Do not use require
 * require_tree .
 * require_self
 */
 // Custom bootstrap variables must be set or imported *before* bootstrap.
  @import "bootstrap";

Step 4

Add the following to application.js:

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

That’s it.