Essirl Essirl - 1 month ago 30
CSS Question

Bootstrap Column Equal Height Issue

In my site bootstrap grid column equal height not work. when my product name have long text then height creates issue for other column. to fix height issue i add two css but not work

Added css is

.demo{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#efefef;
}

#equalheight {
overflow: hidden;
}


My live page link given bellow, this page show column height problem

existing div structure

<div class="row ">
<div id="equalheight">
<div class="col-sm-6 col-md-4 wow fadeInUp demo">
<div class="products ">
</div>

</div>

</div>
</div>

Answer

Try using height instead of padding and margin. Padding and Margin makes the div expand with the info you put into it. With height, one the info inside (such as text or img) hits the edge of the div, your overflow will take over and hid any information that goes beyond the div.