Grid system

Inspiration comes of working every day.

How it works

Bootstrap has a powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Grid options

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

Example: Desktop default grid system

.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-3
.col-lg-3
.col-lg-3
.col-lg-3
.col-lg-4
.col-lg-4
.col-lg-4
.col-lg-6
.col-lg-6
.col-lg-8
.col-lg-4
.col-lg-9
.col-lg-3
.col-lg-10
.col-lg-2
.col-lg-11
.col-lg-1
.col-lg-12
.col-lg-12
.col-lg-8
.col-lg-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-lg-6
.col-lg-6
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-3
.col-lg-9

Example: Mobile and desktop

.col-12 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-lg-4
.col-6 .col-lg-4
.col-6 .col-lg-4
.col-6
.col-6

Example: Mobile, tablet, desktop

.col-12 .col-md-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4