How to add Bootstrap 4.4.1 to Rails

There are several ways to add Bootstrap 4 in your Rails application. The fastest way to work with Bootstrap 4 in Rails is to actually load the assets via CDN. To do that open layouts/application.html.

1. Quick Install (CDN)

Add in your <head></head> the following tags:

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Just before the body tag ends </body> add the javascript cdn’s:

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

With the above done you are now ready to create some amazing Ruby on Rails user interfaces.

Note! The recomended way of integrating Bootstrap 4 with Rails is to add it to the Rails asset pipeline.

2. Add Bootstrap 4 in the Rails asset pipeline

To do that we need to add bootstrap and jquery in your Gemfile:

gem 'bootstrap', '~> 4.4.1'
gem 'jquery-rails'

Then run bundle install and restart your server to make it available. Once gems are installed you can proceed and add it in your SCSS and JS files.

Add in your app/assets/stylesheets/application.scss (if you have application.css rename to application.scss):

@import "bootstrap";

Next add in your app/assets/javascript/application.js:

//= require jquery3
//= require popper
//= require bootstrap