Tutorial: Using Bootstrap in Rails 5

One of the benefits of using Rails is it’s expensive ‘gem’ library. If you want some extra functionality that you don’t already have and don’t want to go through the hassle of writing thousands of lines of code, just add a gem. Utilizing the Ruby Gem library is one way to work smarter and to leverage the potential we have at our fingertips. Today, we will be discussing how to use the wildly popular Front End framework, Bootstrap, in our Rails application. Let’s dive in…

First things first, let’s add Bootstrap to our application by including it in our Gemfile. Add the following snippet to your Gemfile, before the :development section:

gem 'bootstrap-sass', '~> 3.3.6'

Then, run back to your terminal and run the command, bundle install.

This has now added the functionality of Bootstrap to your Rails application, but in order to actually use it we first need to include it in our CSS. So let’s head back up to the App folder.

In your /app/assets/stylesheets/application.css, do a couple of things. First, change the file extension to .scss. This is because we will no longer be using plain old CSS. Then, add the following snippet in that file:*= require style.scss

Note: All future stylesheets will be .scss files.

Now, let’s stop for a moment. What is happening here? The nature of CSS is such that it works in a top down order. So, when we run a require call on a file, it is compiling it back into plain old CSS for us, but it is doing it in the order we specify. The best practice for this is to require one master file, I tend to use style.scss and the inside of that file we will call on all of our other stylesheets. Let’s take a look.

Right now, style.scss is pretty plain and simple. We just started this app so all we will have right now is

@import "bootstrap-sprockets";
@import "bootstrap";

As your application grows larger and larger you will be importing more and more stylesheets. It is important to keep things separated so that your code is easily navigable. Here is the style.scss file from a recent project of mine:

Screenshot at Aug 15 19-33-25.png

Now that we have our stylesheets all set up, let’s head over to our JavaScript folder. In your app/assets/javascript/application.js file you should have the following code:

Screenshot at Aug 15 19-39-03

Great, we are now in the home stretch. Make sure you have set up your routes in your config/routes.rb file. You can set the root to something like root 'home#index'. Then create a home_controller.rb file and an index method inside of that. Follow this up with a folder in your view’s folder for home/index.html.erb. This will be what is rendering.

Now, make sure you head over to your terminal and shutdown the server (if you already have one running) and then boot it back up again (rails s). This first time I used bootstrap in rails, I didn’t know about this and spent 20 minutes pulling my hair out wondering why it wasn’t working – so restart the server kids.

That’s it! You now have Bootstrap all set up and ready to go. When using Bootstrap, you are necessarily going to be using all of their default styling choices. Things like font, color, size etc. In order to look more original and unique you should play around with that and get away from the stock look. At first when building the site, this is not important but as you get closer to deployment, you should seriously consider this.

Check out these awesome resources, straight from the makers of Bootstrap!

Submit a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s