PUBLISHED ON: AUGUST 9, 2021
How to Vertical Align a DIV in Bootstrap?
The vertical Alignment property is used to align the elements vertically on the webpage. The vertical alignment utilities are 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 like div. For vertical aligning div elements, we need to used flexbox utilities. Let's understand with the examples.
Using flexbox alignment utilities
To align the div element vertically, use the align-items class. We can vertically align items to the center, start, baseline, end, or stretch.
Example: Vertical-align div elements
In this example, we will vertically align div items using the align-items class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical align div items</h2>
<div class="d-flex align-items-start bg-info" style="height: 80px;">
<div class="p-2 border border-light">Flex item 1</div>
</div>
<br>
<div class="d-flex align-items-end bg-info" style="height: 100px;">
<div class="p-2 border border-light">Flex item 1</div>
</div>
<br>
<div class="d-flex align-items-center bg-info" style ="height: 80px;">
<div class="p-2 border border-light">Flex item 1</div>
</div>
<br>
<div class="d-flex align-items-baseline bg-info" style="height: 80px;">
<div class="p-2 border border-light">Flex item 1</div>
</div>
<br>
<div class="d-flex align-items-stretch bg-info" style="height: 80px;">
<div class="p-2 border border-light">Flex item 1</div>
</div>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Add responsive variation to vertically align div items
We can also add responsive variation to vertically align div elements. For example, .align-items-md-center centers the div in the medium viewport. Here in this example, we have used a responsive variation of align-items.
Conclusion
Here, we learned to vertical-align div in Bootstrap 5. The vertical alignment utilities cannot be used to align div items. So, we need to use an align-items class from flexbox. Responsive variations are also available for div alignment.
