CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
Jeremy
Jeremy

Reputation: 21

Creating equal height divs in Bootstrap 4 flexbox

I use Bootstrap 4 flexbox enabled. I can not make row > col > div box equal heights.

I have tried position: absolute but it is not the best.

Here's a screenshot:

enter image description here

<div class="row" >
<div class="col-xs-12" >
<div class="home_category" ></div> 
</div>
<div class="col-xs-12" >
<div class="home_category" ></div>
</div>
</div>

col-xs-12's height always equals but .home_category height varies based on content size.

I'm looking for a solution to have 100% height for .home_category. Same height as col-xs-12.

Live demo at https://officestock.ca/

I appreciate your feedbacks.

Upvotes: 1

Views: 745

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372059

In reviewing your code, the boxes are currently getting their height from the content. You'll notice that some image labels are two-line and others are three-line. The differences in those line numbers are causing differing heights for the boxes.

To apply full, equal height to all boxes simply make this adjustment to your CSS:

@media (min-width: 48em) {
.col-md-6 {
    flex: 0 0 50%;
    display: flex; /* NEW */
}

Upvotes: 1

Related Questions