Using Twitter Bootstrap 4 with Rails 5.1 App

Add the following gems to Gemfile.

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

Run bundle. In app/assets/javascripts/application.js, add:

//= require jquery3
//= require jquery_ujs

Rename application.css to app/assets/stylesheets/application.scss and add:

@import "bootstrap";

Remove require statements in application.scss. Add:

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

to application.js. It will look like this:

//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery_ujs
//= require rails-ujs
//= require turbolinks
//= require_tree .

In application.scss:

body { 
  padding-top: 70px; 
}

This will prevent the navigation bar hiding the top part of the content inside the container.


Related Articles


Create your own user feedback survey