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


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.