Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Twelve Column Grid

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

col-md-12
col-md-6
col-md-6
col-md-4
col-md-4
col-md-4
col-md-3
col-md-3
col-md-3
col-md-3
col-md-2
col-md-2
col-md-2
col-md-2
col-md-2
col-md-2
col-md-10
col-md-2
col-md-8
col-md-4
col-md-4
col-md-8
col-md-2
col-md-10

Grid Stacking

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Resize your browser window to see the grid transform.

1
2
3
4
5
6
7
8
9
10
11
12

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. See the colorful demo below (best viewed in desktop screen size).

Level 4 columns are nested in level 3 columns, which are nested in level 2 columns, which are nested in level 1 columns, which are nested in level 0 root column.

Level 0
Level 1
Level 2
Level 3
L4
L4
Level 3
L4
L4
Level 2
Level 3
L4
L4
Level 3
L4
L4
Level 1
Level 2
Level 3
L4
L4
Level 3
L4
L4
Level 2
Level 3
L4
L4
Level 3
L4
L4