Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to vertically align content and best practices with resets with Bootstrap 5.

Vertical Alignment

We can vertically align content with various classes.

To do that, we can apply one of the .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top classes.

Then we can write:

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

We can align items with all these classes.

align-baseline aligns them to the baseline, which is the middle.

align-top aligns content to the top.

align-middle aligns things to the middle.

align-bottom aligns content to the bottom.

align-text-top aligns text to the top.

align-text-bottom aligns text to the bottom.

These classes can also be used within table cells.

#software-development #javascript #technology #programming #web-development