Many, many web pages call for grid layouts. Whether it’s a set of photos to display, a paragraphs of text side-by-side or a marketing layout, the grid is a very common way to arrange things. In the past, most front-end developers painstakingly made their own grid layouts with CSS and Javascript.

Enter Twitter Bootstrap

Fortunately, some people at Twitter have made an excellent system, called Bootstrap that abstracts a lot of the tedious work for us and makes it easy to make grid layouts such as in the image below.

Where to download

First go to Twitter Bootstrap’s github page. Click on the button labeled “zip” to start your download.

The zip will contain directories for documents, images, js and less. It also has a few other files at the top level, such as the license. Bootstrap is released under the Apache license, which allows you to copy, share, distribute and even make derivative works from Bootstrap, as long as you include the Apache license and give the authors credit.

The important directory for us is the docs/examples directory. Take a minute to open up the html pages in there and see what is possible. Have a look at the code, too. The very fastest way to get started experimenting with your own bootstrapped layout is to create another html in this same directory. I called mine “myExample.html”.

The includes

To use Bootstrap in your html file, you have two include the boostrap.css file, and the javascript files you want to use. Most people will include jQuery and some of the jQuery plugins offered on Twitter’s github page. For this simple example, no JS includes are necessary. Just add the following line to your header:

[html]<link href="../assets/css/bootstrap.css" rel="stylesheet">[/html]

The Container div

Everything in bootstrap has to go inside a dive with the class container.

Rows and columns

Inside the container, you can create rows (div blocks with the class=”row”). Each row is divided into 12 units of width. You can create a block by using the built-in span classes. For example, to make three paragraphs of equal width, you’d put each on in a div block with class=”span4″.

To make one column take up all the space, you’d use the class “span12″. For one block that takes up two thirds the width of the content area and another that takes up one third, you’d use a div with class=”span8″ and a div with class=”span4″.

It really is that easy. With Bootstrap, span1, span2… span12 are all valid classes and work pretty much the way you’d expect them to.

A Few Last Words

As you can see, by leveraging the open-sourced Bootstrap code that Twitter has shared with us, you can develop clean, good looking front-end designs more quickly than ever. This introduction has barely touched the surface of what bootstrap will let you do. From popdown lists to advanced JavaScript effects, there’s something offered to help modernize and streamline just about any kind of layout!

You can download the full HTML source of the example in the image at the top of this post here: myExample.html. Remember, you’ll have to download bootstrap so this HTML file can find the bootstrap.css!