How to add and customize Bootstrap 4 in a Rails 5 app
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 gem 'bootstrap', '~> 4.3.1'
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
*= 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.
If your Rails version is 5.1+ then you’ll need to include jQuery. To do that, install the
bundle intsall and then add the libraries to your
application.js manifest file. For example:
#GEMFILE gem 'jquery-rails'
$ bundle install
Now we’re ready to customize the styles!
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!
.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.
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.