Column

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Column [Vertical Alignment]

.align-items-* = { start, center, & end }
Column
Column
Column
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns

One of three columns
One of three columns
One of three columns

Column [Horizontal Alignment]

.align-items-* = { start, center, & end }
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns

Column [column breaks]

.w-100
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
apply specific break
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Column [Reordering]

.order-* = { 1, 2, 3, 4, 5}
First in DOM, no order applied
Second in DOM, with a larger order
Third in DOM, with an order of 1
Column [Vertical alignment]
<div class="container">
<div class="row aw-grid">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Column [align-items-start]
<div class="container">
<div class="row align-items-start aw-grid aw-height aw-highlight">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
Column [align-items-center]
<div class="container">
<div class="row align-items-center aw-grid aw-highlight aw-height">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
Column [align-items-end]
<div class="container">
<div class="row align-items-end aw-grid aw-highlight aw-height">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
Column [Self]
<div class="container">
<div class="row aw-highlight aw-grid aw-height">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Column [content-start]
<div class="container">
<div class="row justify-content-start aw-highlight aw-height aw-grid">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Column [content-center]
<div class="row justify-content-center aw-grid aw-height aw-highlight">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
Column [content-end]
<div class="row justify-content-end aw-grid aw-height aw-highlight">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
Column [content-around]
<div class="container">
<div class="row justify-content-around aw-highlight aw-height aw-grid">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
Column [content-between]
<div class="container">
<div class="row justify-content-between aw-grid aw-height aw-highlight">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Column [content-evenly]
<div class="container">
<div class="row justify-content-evenly aw-grid aw-height aw-highlight">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Column [Column Breaks]
<div class="container">
<div class="row aw-grid aw-highlight">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Column [specific Breaks]
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
</div>
</div>
Column [Reordering]
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>