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

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>

source

Leave a Reply

Another post

Bekerja di rumah

Bekerja di rumah sudah biasa bagi saya yang berprofesi sebagai UI Designer dan wordpress konsultan.

Menyambut ramadhan

Menyambut ramadhan adalah hal yang lumrah dilakukan oleh seorang muslim. Tidak terasa beberapa hari menjelang