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

					

<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

One of two columns



<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 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

					

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

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

					

<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 .rows, but not every implementation method can account for this.

.col-6 .col-sm-3

					

<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 -->