LaunchSchool - An Online School for Developers /

Blog

Integrating Rails and Bootstrap, Part 1 - the Installation

This is part 1 of a 3-part tutorial series.

In part one of this tutorial, we will introduce you to the Bootstrap framework. We will also teach you how to create a Rails app and integrate it with Bootstrap.

The complete project code for this tutorial series is available on github.

What is Bootstrap?

Bootstrap is a framework that makes it easy for a developer to create a nice design for a website or web application. There are predefined css classes for creating common components such as widgets, typography elements, lists, forms, and more. The framework also provides Javascript which makes it easy to create things like modals, popovers, scrollspies, accordions, and more. Their documentation is very thorough, providing example code for most, if not all of the components that Bootstrap provides.

How do I use it?

Bootstrap has a great getting started guide which will help you integrate it into your application. However, if you are using Rails, the process is different. The goal of the rest of this guide is to take you through that process.

Create a new Rails application

This section will help you create a new Rails application. If you already have an application that you want to integrate with Bootstrap, please skip to the next section.

If you haven’t set up Ruby on Rails development on your machine yet, you can follow our tutorial to Install Ruby on Rails on Linux or Install Ruby on Rails for Mac OS X. If you are using Windows, you can look into rubyinstaller, or setup a VM and then follow the linux instructions.

However you go about the installation on your machine, you will need to make sure that you install the Rails gem.

1
gem install rails

Now let’s create our sample Rails app called todo_app.

1
rails new todo_app

and generate a Todo model:

1
rails generate scaffold Todo title:string notes:text

Migrate the changes to your database:

1
rake db:migrate

We need some data to show for our todo app, so let’s seed the database with some sample data. Put the following lines in your db/seeds.rb file.

1
2
3
4
5
6
7
# db/seeds.rb

Todo.create!(title: 'grocery shopping', notes: 'pickles, eggs, red onion')
Todo.create!(title: 'wash the car')
Todo.create!(title: 'register kids for school', notes: 'Register Kira for Ruby Junior High and Caleb for Rails High School')
Todo.create!(title: 'check engine light', notes: 'The check engine light is on in the Tacoma')
Todo.create!(title: 'dog groomers', notes: 'Take Pinky and Redford to the groomers on Wednesday the 23rd')

then run the following in your terminal/command prompt:

1
rake db:seed

Now let’s set up a simple route:

In your config/routes.rb file, add root 'todos#index':

1
2
3
4
5
6
7
# config/routes.rb

Rails.application.routes.draw do
  resources :todos
  root 'todos#index'

  ...

Now run the server:

1
rails s

Now when you visit the app in your browser, at http://localhost:3000, you should see this:

Choosing a CSS preprocessor

When you are using a framework such as Bootstrap, a CSS preprocessor is going to be involved. They enhance the vanilla CSS and add functionality such as use of variables, mixins and nesting of rules. Let’s look at two popular CSS preprocessors.

LESS

Bootstrap is written in LESS.

Here is an example of LESS, copied directly from the page linked above:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

which compiles to:

1
2
3
4
5
6
7
8
.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

SASS

Another commonly used preprocessor is SASS. There are two flavors of SASS. The one you use is completely up to you, based on your preferred delimiter style.

SASS

SASS uses whitespace to nest CSS rules. There is also no place for semicolons in SASS.

For example:

1
2
3
4
5
6
7
.header
  display: block
  background-color: red

  .image
    float: left
    max-width: 80px

would be compiled to:

1
2
3
4
5
6
7
8
9
.header {
  display: block;
  background-color: red;
}

.header .image {
  float: left;
  max-width: 80px;
}

SCSS (Sassy CSS)

SCSS resembles standard CSS code closely. In fact, you can actually change the extension of a CSS file to scss and run it through a preprocessor and it will compile just fine. One big difference is, although you can write the same CSS code you are used to, you can also nest your rules.

The example above would be written in SCSS as:

1
2
3
4
5
6
7
8
9
.header {
  display: block;
  background-color: red;

  .image {
    float: left;
    max-width: 80px;
  }
}

and would still compile to:

1
2
3
4
5
6
7
8
9
.header {
  display: block;
  background-color: red;
}

.header .image {
  float: left;
  max-width: 80px;
}

Making a choice

This tutorial series will be using SASS. Although Bootstrap is written using LESS, it has been ported to SASS and the SASS version is officially maintained by the Bootstrap team.

If you are interested in using a LESS version, one of these gems might be useful to you:

If you choose to use one of these gems, the rest of this Part 1 article will not apply to you. But you can meet us in part two of this series.

Integrating Bootstrap with Rails

Now that we have a Rails app with some data in it, we can start working on integrating Bootstrap.

Install the Ruby Gems for Bootstrap

Let’s add the necessary gems to our Gemfile:

1
2
3
4
5
6
7
8
9
10
# Gemfile

...

gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'

# NOTE: The sass-rails gem is included with new Rails applications by default.
#       Please make sure that it is not already in your Gemfile before uncommenting it.
# gem 'sass-rails'

Autoprefixer (autoprefixer-rails) is optional, but recommended. It automatically adds the proper vendor prefixes to your CSS code when it is compiled.

Now run

1
bundle install

to install the gems.

Import Bootstrap CSS assets

We will rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.css.sass. Then we can import the Bootstrap assets in your newly-renamed application.css.sass file.

1
2
3
4
5
6
// app/assets/stylesheets/application.css.sass

...

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

When you compile, imported assets render a compiled version of their contents where the @import statement was found.

Import Bootstrap Javascript assets

You need to add:

1
//= require bootstrap-sprockets

to your app/assets/javascripts/application.js file.

It is important that it comes after:

1
//= require jquery

Your file should look like this:

1
2
3
4
5
6
7
8
9
// app/assets/javascripts/application.js

...

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

It is also important that:

1
//= require_tree .

is the last thing to be required.

The reason is, //= require_tree . compiles each of the other Javascript files in the javascripts directory and any subdirectories. If you require bootstrap-sprockets after everything else, your other scripts may not have access to the Bootstrap functions.

Congratulations

That’s it! You now have a working Rails app with Bootstrap integrated. The rest of the posts in this series will introduce you to Bootstrap’s CSS and Components and Bootstrap’s Javascript Based Features