Bootstrap - Flex Utility Classes Part 4: Aligning Items with align-items-*

Align Items on Cross Axis

This utility aligns items vertically in a row layout (or horizontally in a column layout).

Example 8: Align Centre

<div class="d-flex align-items-center" style="height: 100px;">

  <div class="p-2 bg-secondary text-white">Vertically Centered</div>

</div>

Explanation:

align-items-centre vertically centres the item inside the 100px-tall container.

Example 9: Align Start

<div class="d-flex align-items-start" style="height: 120px;">

  <div class="p-2 bg-dark text-white">Top Aligned</div>

</div>

Explanation:

Items align at the top of the flex container.