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

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

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

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

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-12 .col-sm-6 .col-md-8
.col-6 .col-md-4

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.

.col-9
.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.

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.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
				
<!-- Vertical alignment -->
<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 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 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 -->
<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 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 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 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 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 - .no-gutters -->
<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 breaks - .w-100 -->
<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>