GridSystem

Powerfulmobile-first flexbox grid to
build layouts of all shapes and sizes thanks to a twelve column system.

Grid options

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 widthNone(auto)540px720px960px1140px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-
# of columns12
Gutter width30px (15px on each side of anumlumn)
NestableYes
Column orderingYes
Bootstrap Grid System

Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

.col-md-12
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7
.col-md-6
.col-md-6
.col-md-7
.col-md-5
.col-md-8
.col-md-4
.col-md-9
.col-md-3
.col-md-10
.col-md-2
.col-md-11
.col-md-1
.col-md-4
.col-md-4
.col-md-4