In Bootstrap 5, you can vertically align text in a table cell using the align-middle class. The align-middle class is a utility class provided by Bootstrap that vertically aligns the content of an element to the middle.
Here's how you can use the align-middle class to vertically align text in a Bootstrap 5 table cell:
html<!DOCTYPE html>
<html>
<head>
<!-- Add Bootstrap CSS link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="align-middle">John Doe</td>
<td class="align-middle">30</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="align-middle">Jane Smith</td>
<td class="align-middle">25</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
</body>
</html>
In the above example, we have used the align-middle class on the td elements of the table to vertically align the text within the cells. This will center the text vertically within each cell.
Keep in mind that Bootstrap's align-middle class only applies vertical alignment to the immediate child content of the element. If you have multiple lines of text or complex content within a table cell, you may need to apply additional styles or use custom CSS to achieve the desired vertical alignment.