Bootstrap, from Twitter

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.

Default grid

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.

Example grid markup

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>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
8
8
5
11
16

Offsetting columns

4
8 offset 4
1/3 offset 2/3s
4 offset 4
4 offset 4
5 offset 3
5 offset 3
10 offset 6

Nesting columns

Nest your content if you must by creating a .row within an existing column.

Example of nested columns

Level 1 of column
Level 2
Level 2
<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>

Roll your own grid

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.

Inside the grid

The variables needed to modify the grid system currently all reside in variables.less.

Variable Default value Description
@gridColumns 16 The number of columns within the grid
@gridColumnWidth 40px The width of each column within the grid
@gridGutterWidth 20px The negative space between each column
@siteWidth 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 .fixed-container() mixin.

Now to customize

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!