The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.
As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.
<div class="row"> <div class="span6"> ... </div> <div class="span10"> ... </div> </div>
Nest your content if you must by creating a
.row within an existing column.
<div class="row"> <div class="span12"> Level 1 of column <div class="row"> <div class="span6"> Level 2 </div> <div class="span6"> Level 2 </div> </div> </div> </div>
Built into Bootstrap are a handful of variables for customizing the default 940px grid system. With a bit of customization, you can modify the size of columns, their gutters, and the container they reside in.
The variables needed to modify the grid system currently all reside in
||16||The number of columns within the grid|
||40px||The width of each column within the grid|
||20px||The negative space between each column|
||Computed sum of all columns and gutters||We use some basic match to count the number of columns and gutters and set the width of the
Modifying the grid means changing the three
@grid-* variables and recompiling the Less files.
Bootstrap comes equipped to handle a grid system with up to 24 columns; the default is just 16. Here's how your grid variables would look customized to a 24-column grid.
@gridColumns: 24; @gridColumnWidth: 20px; @gridGutterWidth: 20px;
Once recompiled, you'll be set!