Bootstrap 5 Table Vertical alignment

What is Bootstrap Tables?

Bootstrap Tables are this is useful to make tables and charts and it has a lot of customizable options and utilities thanks to the Bootstrap predefined styles. Bootstrap provides us with functionality that helps us to vertically align these table cells' contents. By default, the contents of a table cell are always aligned to the top until customized. To customize this vertical alignment we have to use the Vertical Alignment classes. 

Prerequisite

• Bootstrap 5 Tables
• Bootstrap 5 Vertical Alignment

Bootstrap 5 Table Vertical alignment Used classes

No special table class is used to implement this design, you have to use the Vertical Alignment classes to add this feature. 

Syntax:

<table class="table [align-middle/bottom/top]">
 <thead>
 ...
 </thead>
 <tbody>
 <tr class="align-bottom">
 <td class="align-top">
 ...
 </td>
 <td>...</td>
 </tr>
 </tbody>
</table>

Example 1: The code example below demonstrates how we can add vertical alignment to a table and how it stays intact responsively:

Output:

Example 2: The code demonstrates how we can vertically align the items in a hoverable table:

Output:

Reference: https://getbootstrap.com/docs/5.0/content/tables/#vertical-alignment