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?

Bootstrap uses a 12 column layout system try changing col-md-4 to col-md-6 (assuming you want 2 columns). — Jonathan Chaplin, Jan 11 '18 at 18:44
@JonathanChaplin I changed col-md-4 to col-md-6, but this change affects only horizontal positions, while I'm looking for align these 2 div's to center vertically — Alex Fruzenshtein, Jan 11 '18 at 18:48
Ok, you need to add w-100 and h-100 for full height and width on several elements. I'll post a solution below. — Jonathan Chaplin, Jan 11 '18 at 18:55

score 8 · Accepted Answer · answered Jan 11 '18 at 18:59

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>

How to center div vertically in Bootstrap 4?

1 Answers1