From the Grid Up

Guard: Don't fight it son. Confess quickly! If you hold out too long you could jeopardize your credit rating.

The grid layout is one of the most powerful things about Bootstrap (it's not just pretty styles, people!). What's so great about it? Well, it looks nice, and makes your site readable. It builds a responsive from the beginning without much concern for different view ports, devices, and browsers (with the exception of IE - not touching that one).

With the latest version of Bootstrap (3 as of this writing), Bootstrap went mobile first. That is to say, make sure it works on mobile browsers first. But don't worry lads, it works just fine on all modern browsers and view ports.

First things first, everything gets wrapped in a div with either the container (fixed layout) or container-fluid (full width) class. From there, everything gets wrapped in row class. Each row is a unit in the grid, and the children of that grid display all in the same row or line. Child div elements as assigned a column number that must add up to 12. Column classes have 2 qualities, one is the number that must add up to 12. The other is a size, it can one of the following:

xs Extra small devices Phones (<768px)
sm Small devices Tablets (≥768px)
md Medium devices Desktops (≥992px)
lg Large devices Desktops (≥1200px)

Grids in action

Here's how the 12 column system is displayed. Expand and shrink your browser to see how it behaves:

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Here's how the view port widths are displayed. Expand and shrink your browser to see how it behaves:

.col-xs-8
.col-xs-4
.col-sm-8
.col-sm-4
.col-md-8
.col-md-4
.col-lg-8
.col-lg-4

Sometimes things aren't quite the right height for that you can use clear fix. So, if something looks fine on a large view, but doesn't line up on a small view, you can use clearfix to make sure things line up.

Offsets

Use offsets when you want extra whitespace or padding, but to line up with the grid. The offset always displays to the left. Notice how each row's numbers still add up to 12.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

Learn more in the Bootstrap Grid examples page.

Nesting

You can nest the bootstrap grid structure, just make sure to wrap, everything in a row, and remember that all the direct children of a row still add up to 12.

.col-md-8
inner .col-md-3
inner .col-md-9
.col-md-4