Bootstrap Equal Height Columns — How to Make Columns the Same Height
Bootstrap Equal Height Columns make your grid look balanced. Here’s how to create equal height columns in Bootstrap with Flexbox.
How to Make Bootstrap Equal Height Columns
</p>
<div class=”row align-items-stretch”> <div class=”col-md-6″> <div class=”p-3 border bg-light h-100″>Column 1</div> </div> <div class=”col-md-6″> <div class=”p-3 border bg-light h-100″>Column 2</div> </div> </div> How Bootstrap Equal Height Columns Work
Bootstrap’s align-items-stretch makes columns stretch to the same height using Flexbox.
Why Use Bootstrap Equal Height Columns
Bootstrap Equal Height Columns keep your layouts clean and aligned, no matter how much content is inside.
Common Mistake in Bootstrap Equal Height Columns
Forgetting to set h-100 on inner containers — it’s needed to stretch to full height.
Pro Tip for Bootstrap Equal Height Columns
Combine equal height with d-flex and flex-column for even more layout control inside columns.
2 thoughts on “Bootstrap Equal Height Columns”