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.