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.

Grid system Rock the standard 940px or roll your own

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.

Example of nested columns

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.