loading...
Grid System
Bootstrap Grid Extra small (<576px) Small (≥576px) Medium (≥768px) Large (≥992px) Extra large (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 34rem 45rem 60rem 72.25rem
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
Offsets Yes
Column ordering Yes
Grid Examples
XS Grid
.col-4
.col-4
.col-4
SM Grid
.col-sm-3
.col-sm-4
.col-sm-5
MD Grid
.col-md-5
.col-md-3
.col-md-4
LG Grid
.col-lg-4
.col-lg-4
.col-lg-4
XL Grid
.col-xl-6
.col-xl-6
Responsive Utilities
Class Extra small devices
Portrait phones (<576px)
Small devices
Landscape phones (≥576px)
Medium devices
Tablets (≥768px)
Large devices
Desktops (≥992px)
Extra large devices
Desktops (≥1200px)
.hidden-xs-down Visible Visible Visible Visible
.hidden-sm-down Visible Visible Visible
.hidden-md-down Visible Visible
.hidden-lg-down Visible
.hidden-xl-down
.hidden-xs-up
.hidden-sm-up Visible
.hidden-md-up Visible Visible
.hidden-lg-up Visible Visible Visible
.hidden-xl-up Visible Visible Visible Visible