Grid System
Stacked to horizontal
.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-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Mobile and desktop
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
Mobile, tablet, desktop
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
Column wrapping
.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.
Responsive column resets
.col-6 .col-sm-3

Resize your viewport or check it out on your phone for an example.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
Offsetting columns
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
Grid options
Extra small devices Phones (<576px) Small devices Tablets (≥576px) Medium devices Desktops (≥768px) Large devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 1.875rem / 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes