Bootstrap Vertical Centering — How to Center Content Vertically with Bootstrap
Bootstrap Vertical Centering is super handy when you want content perfectly centered in its container. Here’s how to do it with Bootstrap Flex utilities.
How to Do Bootstrap Vertical Centering
</p>
<div class=”d-flex align-items-center” style=”height: 200px;”> <p class=”m-auto”>I am vertically centered!</p> </div> How Bootstrap Vertical Centering Works
d-flex makes the container a flexbox, align-items-center centers content vertically.
Why Use Bootstrap Vertical Centering
Bootstrap Vertical Centering keeps your layout neat and saves you from writing custom CSS.
Common Mistake in Bootstrap Vertical Centering
Not setting a height on the container — without it, vertical centering has no effect.
Pro Tip for Bootstrap Vertical Centering
Combine with justify-content-center to center content both vertically and horizontally.
1 thought on “Bootstrap Vertical Centering”