Erwin Prasetyo
UI/UX Designer
© 2022 All rights reserved.
How to Vertical Align a DIV in Bootstrap
Answer: Use the align-items-center
Class
In Bootstrap 4, if you want to vertically align a <div>
element in the center or middle, you can simply apply the class align-items-center
on the containing element.
The following example will show you how to vertical align a grid column inside a row.
Example
<div class="container">
<div class="row align-items-center">
<div class="col-md-12">Vertical Center Aligned Grid Column</div>
</div>
</div>
Similarly, you can align a DIV element vertically in the middle of a containing element by using the class d-flex
in combination with the class align-items-center
, like this:
Example
<div class="d-flex align-items-center">
<div class="box">Vertical Center Align a Div</div>
</div>
However, if you’re using the Bootstrap 3
version you can still do it with some custom CSS. Let’s try out the following example to understand how it basically works:
Example
/* CSS code */
.vcenter-item{
display: flex;
align-items: center;
}
<!-- HTML code -->
<div class="wrapper vcenter-item">
<div class="box">Vertically Centered Div</div>
</div>