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.

<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:

<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:

/* 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:

• How to align Bootstrap modal vertically center
• How to center a column in bootstrap in Bootstrap
• How to get centered content in Bootstrap