Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

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:

Advertisements
Bootstrap UI Design Templates