Fixed-width container
Fluid-width container
...
...
...
...
...
...
...
...
...
...
...
...
1 of 2
1 of 2
1 of 4
1 of 4
1 of 4
1 of 5
1 of 5
1 of 5
1 of 5
1 of 5

One column width

1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 4
1 of 4
1 of 4
1 of 4

Variable with content

Variable width content
1 of 3
1 of 3
1 of 3
Variable width content
1 of 3
1 of 3
1 of 3
Variable width content
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3

Horizontal alignment

1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2

Around

1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2

Between

1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 2
1 of 1
1 of 2
1 of 2
1 of 4
1 of 4
1 of 4
1 of 4
1 of 2
1 of 2

Stacked to horizontal

Using a single set of .col-sm-* classes, can you create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (*sm).

1 of 2
1 of 2
1 of 3
1 of 3
1 of 3
1 of 4
1 of 4
1 of 4
1 of 4

Mix and match

Don’t want your columns to simply stack in some grid tiers, use a combination of different classes for each tier as needed.

1 of 2
1 of 2
1 of 2
1 of 2
1 of 3
1 of 3
1 of 3

Mixins

Mixins are used in conjunction with the grid variables to generate CSS for individual grid columns.

Examples

You can modify the variables to your own custom values, or just use the mixins with their default values. Here a example of using the default settings to create a two-column layout with a gap between.

Result