Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 849
Essirl Avatar asked Aug 31 '26 20:08

Essirl


1 Answers

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.

like image 87
Taylor McCullough Avatar answered Sep 02 '26 11:09

Taylor McCullough



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!