How to add Twitter Bootstrap to Ruby on Rails application

By:, On:

Alright, we're building our application. So far it hasn't been the best looking website in the universe. It's almost never too early to make it look pleasant to the eye (so that we're not ashamed to show off the progress). Unfortunately, writing your own CSS is very time consuming, not to mention that the design itself is a heavy lift. To address that issue, we will use TwitterBootstrap as a way to significantly speed up the process.

TwitterBootstrap is a set of CSS classes we can use to style our website. Bootstrap is very comprehensive and customizable which makes it a great tool. These are some of the reasons why it's used by hundreds of thousands if not millions of websites.

To add Bootstrap to our application we will use gem bootstrap-sass.

Step 1: Add Bootstrap Gem

First, let's head to our Gemfile and add gem to it.

Gemfile


    # Use SCSS for stylesheets
    gem 'sass-rails', '~> 4.0.3' ###### THIS SHOULD ALREADY BE THERE

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

And bundle the gem:

bash


    $ bundle install

Step 2: Create Custom.css File

In the next step we need to import Bootstrap to our CSS file. To do that lets open /app/assets/stylesheets and create new file there and call it "custom.css.scss". On top of the file add the following:

/app/assets/stylesheets/custom.css.scss


    @import "bootstrap";

    .field_with_errors { @extend .has-error; }
    .alert-notice { @extend .alert-info; }
    .alert-alert { @extend .alert-danger; }

The last 3 lines are fixing some inconsistencies between how Devise works and what are the names of bootstrap classes. This will insure that all alerts will display properly.

Step 3: Modify Application

Next we need to add bootstrap JavaScript to our application. Open /app/assets/javascripts/application.js and add this line:

/app/assets/javascripts/application.js


    //= require bootstrap

And here is where the line should be:

/app/assets/javascripts/application.js


    // This is a manifest file that'll be compiled into application.js, which will include all the files
    // listed below.
    //
    // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
    // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
    //
    // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
    // compiled file.
    //
    // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
    // about supported directives.
    //
    //= require jquery
    //= require jquery_ujs

    //= require bootstrap

    //= require turbolinks
    //= require_tree .

If you've been running application you should now restart it in order for the changes to take place. In the terminal window where you're running your app click control + C to stop the app and run it with:


    $ rails server

Step 4: Modify Production File

Before we commit changes and push to Heroku, we need to change one thing in our production configuration file:

config/environments/production.rb


config.assets.compile = true

 

Step 5: Push to Heroku

bash


$ git add .
$ git commit -a -m "added bootstrap"
$ git push
$ git push heroku master

You're done. Bootstrap is now up and running in your application. If you've been following along with the tutorial you can go to the home page and see how font has changed. This is just a tip of the iceberg. We will dive deeper into editing our HTML the minute we have more content to work with.

If you login you will be able to mark this tutorial as finished to track your progress



Comments

  • On: amykang wrote:

    Love your tutorials so far. Short and easy to follow.
  • On: Frank wrote:

    Great! Easy to follow along, and it is great to see the changes in the app right away! Thanks for posting these!
  • On: Amanda wrote:

    This is just what I was looking for. Excellent! Thank you for sharing.

Comment

You can login to comment