How to vertically center a container in Bootstrap?

Sometimes, we want to vertically center a container in Bootstrap.

In this article, we’ll look at how to vertically center a container in Bootstrap.

How to vertically center a container in Bootstrap?

To vertically center a container in Bootstrap, we use flexbox.

For instance, we write

<div class="jumbotron vertical-center">
  <div class="container">...</div>
</div>

to add nested divs.

Then we write

.vertical-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

to make the outer div a flex container with display: flex;.

Then we vertically center the contents with align-items: center;.

Conclusion

To vertically center a container in Bootstrap, we use flexbox.