Bootstrap grid system
The default grid system utilizes 12 columns that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically.
As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new
.row and set of
.span* columns within an existing
Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested
.span3 columns should be placed within a
<div class="row"> <div class="span6"> Level 1 column <div class="row"> <div class="span3">Level 2</div> <div class="span3">Level 2</div> </div> </div> </div>
||12||Number of columns|
||60px||Width of each column|
||20px||Negative space between columns|
Variables in LESS
Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.
How to customize
Modifying the grid means changing the three
@grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.
Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.