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
gem 'bootstrap-sass', '~> 3.3.6'
Then, run back to your terminal and run the command,
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/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
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.
style.scss is pretty plain and simple. We just started this app so all we will have right now is
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:
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!