How to center div vertically in Bootstrap 4?

Question

I started work with bootstrap 4 and trying to create some basic layout. According to the bootstrap 4 docs, I can align block elements vertically by applying class align-items-center to them.

I tried to do the a basic example on codepen, but div's are not positioned on center vertically.

What I'm doing wrong?

Answer 1

If you want to vertically center those elements set the height and width of html and body to 100%. Setting width & height to 100% makes an element take on the height of it's parent.

Next, set all the child elements accordingly. In bootstrap width: 100% is w-100 and height:100% is h-100. Also, bootstrap uses a 12 column layout so change your class from col-md-4 to col-md-6

Note: you could add w-100 and h-100 to html and body in your code for the same effect.

<style>
    html,body{
      width:100%;
      margin:0;
        height:100%;
    }
</style>

<div class="container w-100 h-100">
    <div class="row align-items-center h-100">
      <div class="col-md-6">
        <h1 class="alert alert-primary">Vertical</h1>
      </div>
      <div class="col-md-6">
        <h1 class="alert alert-success">Vertical</h1>
      </div>
    </div>
  </div>