Responsive Classes / Breakpoints
.col-{breakpoint}-# =
.col-{sm, md, lg, xl}-{1-12}
.col-12
.col-12
.col-sm-8
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm
.col-sm
.col-sm
Horizontally Stacked
.col-{breakpoint}-# =
.col-{sm, md, lg, xl}-{1-12}
XS
Portrait Phones
<576px
SM
Landscape Phones
≥576px to <768px
MD
Tablets
≥768px to <992px
LG
Laptops
≥992px to <1200px
XL
Desktops
≥1200px
.col-8
.col-4
.col-sm-8
.col-sm-4
.col-md-8
.col-md-4
.col-lg-8
.col-lg-4
.col-xl-8
.col-xl-4
Mixed & Matched
.col-{breakpoint}-# =
.col-{sm, md, lg, xl}-{1-12}
XS
Portrait Phones
<576px
SM
Landscape Phones
≥576px to <768px
MD
Tablets
≥768px to <992px
LG
Laptops
≥992px to <1200px
XL
Desktops
≥1200px
.col-4 .col-sm-6
.col-8 .col-sm-6
.col-md-6 .col-lg
.col-md-6 .col-lg
.col-md-12 .col-lg
Nesting
.col-{breakpoint}-# =
.col-{sm, md, lg, xl}-{1-12}
XS
Portrait Phones
<576px
SM
Landscape Phones
≥576px to <768px
MD
Tablets
≥768px to <992px
LG
Laptops
≥992px to <1200px
XL
Desktops
≥1200px
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Level 1: .col-md-4
Level 2: .col-12
Level 2: .col-12
Level 1: .col-md-4
Level 2: .col-12
Level 2: .col-12
Level 1: .col-md-4
Level 2: .col-12
Level 2: .col-12