How to Vertical Align a DIV in Bootstrap
Topic: Bootstrap / SassPrev|Next
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
Try this code »<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
Try this code »<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
Try this code »/* CSS code */
.vcenter-item{
display: flex;
align-items: center;
}
<!-- HTML code -->
<div class="wrapper vcenter-item">
<div class="box">Vertically Centered Div</div>
</div>Related FAQ
Here are some more FAQ related to this topic:
