Alignment
Use flexbox alignment utilities to vertically and horizontally align columns.
Vertical alignment
Add one of the following classes on .row
: align-items-start
, align-items-center
or align-items-end
<div class="container">
<div class="row align-items-start">
<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>
<div class="container">
<div class="row align-items-center">
<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>
<div class="container">
<div class="row align-items-end">
<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>
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
<div class="container">
<div class="row justify-content-start">
<div class="col-4"> One of two columns </div>
<div class="col-4"> One of two columns </div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-4"> One of two columns </div>
<div class="col-4"> One of two columns </div>
</div>
</div>
<div class="container">
<div class="row justify-content-end">
<div class="col-4"> One of two columns </div>
<div class="col-4"> One of two columns </div>
</div>
</div>
<div class="container">
<div class="row justify-content-around">
<div class="col-4"> One of two columns </div>
<div class="col-4"> One of two columns </div>
</div>
</div>
<div class="container">
<div class="row justify-content-between">
<div class="col-4"> One of two columns </div>
<div class="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 margin
s from .row
and the horizontal padding
from all immediate children columns.
Need an edge-to-edge design? Drop the parent .container
or .container-fluid
.
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Column wrapping
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4</div>
<div class="col-6">.col-6</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 .row
s, but not every implementation method can account for this.
<div class="row">
<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>
<!-- Vertical alignment -->
<!-- Horizontal alignment -->
<div class="container">
</div>
<!-- No gutters - .no-gutters -->