Sometimes, we want to make Bootstrap columns all the same height with HTML.
In this article, we’ll look at how to make Bootstrap columns all the same height with HTML.
How to make Bootstrap columns all the same height with HTML?
To make Bootstrap columns all the same height with HTML, we use the flexbox classes.
For instance, we write
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: red">some content</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://placekitten.com/100/100/" />
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>
to add the container class to make the outer div a flex container.
Then we add the row and column classes to make the inner divs rows and columns with the same height.
Conclusion
To make Bootstrap columns all the same height with HTML, we use the flexbox classes.
