Bootstrap utilizes a responsive, percent-based grid system, that scales up appropriately as devices and viewport sizes increase. In other words, it's mobile first.
-The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
+On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .span* elements within a .row. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.
Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.