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.


Try this code »

<div class="container">
    <div class="row align-items-center">
        <div class="col-md-12">Vertical Center Aligned Grid Column</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:


Try this code »

<div class="d-flex align-items-center">
    <div class="box">Vertical Center Align a 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:


Try this code »

/* CSS code */
    display: flex;
    align-items: center;
<!-- HTML code -->
<div class="wrapper vcenter-item">
    <div class="box">Vertically Centered Div</div>


Tinggalkan Balasan

Another post

Embed Google Drive on WordPress

Download Plugin: Source article Author: Tom Woodward In December I wrote a tiny shortcode plugin

Bekerja di rumah

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