← Back to all posts

How to add and customize Bootstrap 4 in a Rails 5 app

David Anderson | Apr 20, 2019

There are a few different ways to integrate Bootstrap into your Rails 5 app, but we’ll get it working by installing the official bootstrap gem. The instructions on the gem’s github page are great, so the following is really just a reprint of what you’ll find there.

Add the gem to your Gemfile.

#GEMFILE

gem 'bootstrap', '~> 4.3.1'

Run bundle install in your command line.

$ bundle install

Include the Bootstrap CSS

Confirm that your application css file uses a .scss extension. It may be a .css file in which case you’ll have to change it with the following:

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

Remove any *= require and *= require_tree statements from the Sass file, and instead use @import to import Sass files. Then import the bootstrap styles!

//app/assets/stylesheets/application.scss

@import "bootstrap";

You’ve now got all the bootstrap styles ready to go! We’re not quite done though.

Include the Bootstrap Javascript

Many of the Bootstrap components rely on Javascript and jQuery, so we need to import the Bootstrap javascript files and install jQuery if we need to. jQuery is already included if your Rails version is less 5.1. In that case, simply include bootstrap and popper (a Javascript library bootstrap depends upon for positioning) in your app/assets/javascripts/application.js manifest file.

//app/assets/javascripts/application.js

//= require popper
//= require bootstrap

If your Rails version is 5.1+ then you’ll need to include jQuery. To do that, install the jquery-rails gem, bundle intsall and then add the libraries to your application.js manifest file. For example:

#GEMFILE

gem 'jquery-rails'
$ bundle install
//app/assets/javascripts/application.js

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

Now we’re ready to customize the styles!

Customize Bootstrap

There are a lot of Bootstrap variables that you can define to give your app its own custom style. We’ll just quickly change the body background color and the theme colors to quickly show how to get started. The key point is that you have to set these variables before your @import "bootstrap"; line.

We’ll change the theme colors to match the signal theme from this Bootstrap theming site and change our body background to a light gray.

//app/assets/stylesheets/application.scss

$body-bg: #e2e2e2;

$theme-colors: (
  "primary": #FF304F,
  "secondary": #CACACA,
  "success": #015668,
  "info": #0F81C7,
  "warning": #0DE2EA,
  "danger": #06648C,
  "light": #ececec,
  "dark": #222222
);

@import "bootstrap"; //bootstrap gem

Now you can use the standard Bootstrap styles but they’ll have your custom colors!

customize bootstrap

.container
  .row
    .col-md
      %button.btn.btn-primary Primary
      %button.btn.btn-secondary Secondary 
      %button.btn.btn-success Success 
      %button.btn.btn-danger Danger
      %button.btn.btn-warning Warning
      %button.btn.btn-info Info
      %button.btn.btn-light Light
      %button.btn.btn-dark Dark

There are many other neat tricks and utilities that Bootstrap provides to further customize the look and feel of your app. I’d recommend reading through the documentation to learn more, but I hope the above helps get you started.

SUBSCRIBE

Drop your email in the box below to subscribe to my newsletter. Once per week you'll get Ruby/Rails tips, guides, job postings, and general thoughts from the web developer trenches.