<divclass="container"><divclass="row align-items-start"><divclass="col">One of three columns</div><divclass="col">One of three columns</div><divclass="col">One of three columns</div></div><divclass="row align-items-center"><divclass="col">One of three columns</div><divclass="col">One of three columns</div><divclass="col">One of three columns</div></div><divclass="row align-items-end"><divclass="col">One of three columns</div><divclass="col">One of three columns</div><divclass="col">One of three columns</div></div></div>
Horizontal alignment
Add one of the following classes on .row: justify-content-start, justify-content-center, justify-content-end, justify-content-around or justify-content-between
<divclass="container"><divclass="row justify-content-start"><divclass="col-4">One of two columns</div><divclass="col-4">One of two columns</div></div><divclass="row justify-content-center"><divclass="col-4">One of two columns</div><divclass="col-4">One of two columns</div></div><divclass="row justify-content-end"><divclass="col-4">One of two columns</div><divclass="col-4">One of two columns</div></div><divclass="row justify-content-around"><divclass="col-4">One of two columns</div><divclass="col-4">One of two columns</div></div><divclass="row justify-content-between"><divclass="col-4">One of two columns</div><divclass="col-4">One of two columns</div></div></div>
No gutters
The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.
Need an edge-to-edge design? Drop the parent .container or .container-fluid.
.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.
<divclass="row"><divclass="col-9">.col-9</div><divclass="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div><divclass="col-6">.col-6<br>Subsequent columns continue along the new line.</div></div>
Column breaks
Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.
<divclass="row"><divclass="col-6 col-sm-3">.col-6 .col-sm-3</div><divclass="col-6 col-sm-3">.col-6 .col-sm-3</div><!-- Force next columns to break to new line --><divclass="w-100"></div><divclass="col-6 col-sm-3">.col-6 .col-sm-3</div><divclass="col-6 col-sm-3">.col-6 .col-sm-3</div></div>
Design System