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 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 anumlumn)
Nestable Yes
Column ordering Yes
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