About Lesson
Bootstrap5 Vertical Align
Bootstrap 5 provides vertical alignment utilities to align elements within containers, table cells, flex containers, and more. These classes make it easy to align elements top, middle, or bottom.
1. Align Text Vertically
You can align inline elements relative to their surrounding text using these classes : align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom.
HTML
<p class="border p-3">
<span class="box align-baseline">Baseline</span>
<span class="box align-top">Top</span>
<span class="box align-middle">Middle</span>
<span class="box align-bottom">Bottom</span>
<span class="box align-text-top">Text-Top</span>
<span class="box align-text-bottom">Text-Bottom</span>
</p>Output:
| Class | Effect |
|---|---|
.align-baseline | Aligns to the baseline of text |
.align-top | Aligns element to the top |
.align-middle | Aligns element to the middle |
.align-bottom | Aligns element to the bottom |
.align-text-top | Aligns text to the top |
.align-text-bottom | Aligns text to the bottom |