Grid - alignment

Classes on the row align its columns.

Vertical

align-items-start, align-items-center and align-items-end place the columns at the top, in the middle or at the bottom of the row. This shows only when the columns differ in height.

Code

<div class="row align-items-center">
  <div class="col">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  </div>
  <div class="col">In the middle</div>
  <div class="col">In the middle</div>
</div>

Result

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

In the middle

Horizontal

justify-content-start, justify-content-center, justify-content-end, justify-content-between and justify-content-around share out the space the columns leave free: justify-content-between puts it only between the columns, justify-content-around also at both ends. Columns with col fill the row and leave no space.

Code

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

Result

One of two columns