in Ruby on Rails

Fast Way to Use Bootstrap: Part 1

Recently I started learning Ruby on Rails to build a couple projects.  I’ve heard of Bootstrap and heard you can use it quickly to make a site look good.  Since Bootstrap seems to be the popular way to do things I wanted to test it out myself.  Unfortunately, I was immediately lost.  Things were not very clear to me on what exactly I was suppose to do with it.  So here are some of the things I wish I would have learned about Bootstrap straight out the gates.

 

1) The easiest way to install Bootstrap for me was:

Enter this in your Gemfile.

Next run

from your console.

After that run:

That’s it! Now Bootstrap is installed and we are ready to get to work!

Awesome! But, what are we suppose to do exactly? That’s a great question and I wish I would have seen the answer to this when I first started to play with Bootstrap. Let’s talk about layout before we get into adding any fancy buttons or forms.

Bootstrap is based on a 12 column grid system. This means you can divide a page into up to 12 columns easily using classes from Bootstrap. To use the “rails generate” system you can type the following in your console:

or

This will create a file in your /app/views/layout folder called application.html.erb. However, we are going to do this by hand first.

The important part here is the what is inside the tags. The first class is a container that the rest of the page will be inside. Then you can see we have two “span6” divs inside our “row” class. This means we are going to two columns that both take up the equivalent of 6 columns. So with this example we have a 2 column page that is split down the middle.

The two YIELDS will display your views. In the above example the first yield displays my data. The second yield displays a form to add more data. You can play around with different columns to fit your needs. For example if you want a more traditional blog page with a sidebar try setting your column spans to 9 and 3 instead.

The next thing we want to do is add a navigation bar. This is going to go right after the tag in the same file.

Note: The above code was borrowed (and modified) from Rails Cast #328 which is a great resource for learning step by step rails tricks.

The code above links to all of the pages that you wish to have. Simply add more or less depending on your needs. The <% if user_signed_in? %> part only applies if you have users and want to display login/logout information.

The great thing about this navigation bar is it is responsive to size screen and will automatically resize (and eventually collapse into an icon if needed).

This post is getting long and has been saved as a draft for a long time. So rather than just keep saving it and adding to I’ve decided to break how I use Twitter Bootstrap into multiple posts. In part two I’ll cover super fast CSS changes to make your site look halfway decent.

Please give me feedback as I’m still new to this. Hope you find this helpful!

Write a Comment

Comment