PUBLISHED ON: JUNE 4, 2021
Bootstrap Vertical Alignment
The vertical Alignment property is used to align the elements vertically on the webpage. The vertical alignment is used to set the vertical alignment of an inline, inline-block, inline-table, and table cells element. It cannot be used to vertically align block elements. Bootstrap 5 changes the alignment using vertical-alignment utilities.
The classes used for vertically align the inline elements are:
- align-baseline - Aligns element to the baseline of the parent element.
- align-top - Aligns the element to the top of the parent element.
- align-bottom - Aligns element to the bottom of the parent element.
- align-middle - Aligns element to the middle of the parent element.
- align-text-top - Aligns the text to the top of the parent element.
- align-text-bottom - Aligns the text to the bottom of the parent element.
Example: Adding vertical alignment to inline elements
In this example, we are aligning inline elements by using the bootstrap classes.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container center-text">
<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>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Example: Vertical- alignment in Table cells
The vertical alignment classes can be used with the table cells element as well. Here is an example to use vertical alignment with table cells.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<table class="table" style="height: 100px; width: 300px">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
The Vertical alignment classes are used to align inline elements. Bootstrap 5 provides an easy and quick way to vertically align inline elements with vertical alignment utilities.
