Bootstrap columns are not the same height

Question

I am getting frustrated because I can't get all the columns the same height. Everything looks great inside the product-item , just the way I want it.But on some rows the columns are not the same height.

I've tried all these solutions and I couldn't get it to work...I've tried all the solutions with display:flex

How can I make Bootstrap columns all the same height?

Could someone tell me what I am doing wrong ? How can I fix this please ? thanks in advance..

this is my code so far

    <div class="container col-xs-12 col-sm-12 col-md-12">
            <div class="product-item col-xs-12 col-sm-12 col-md-4">
                  <a href="#">
                         <div class="item-img col-xs-6 col-sm-6 col-md-6">
                             <img src="#">
                              <p style="font-size:13px;"><b>Exp date</b></p>

                               <p class="price"><b>$1.09</b></p>
                                </div>
                               <div class="item-content col-xs- col-sm-6 col-md-6">
                               <h3>Title</h3>
                               <p>Description</p>

                               </div>
                  </a>
         </div>

</div>

.product-item {
    width: 368px;
    min-height: 150px;
    background: none;
    padding: 12px 0px 10px 0px;
    margin: 10px 5px;
    color: #000;
    text-align: left;
    border: 2px solid #F48B3A;
}

.product-item .item-content {
    max-height: 140px;
    overflow: hidden;
}

.item-img .price {
    color: blue;
    font-weight: 600;
    font-size: 14px;
}

score 1 · Answer 1 · answered Apr 04 '16 at 18:18

Add the !important exception to the element where you set the style. It will override the default rules set by Bootstrap

.product-item .item-content {
    max-height: 140px !important;
    overflow: hidden;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

score 1 · Accepted Answer · answered Apr 05 '16 at 10:07

Try this

CSS

.product-item .row {
  display: table;
  margin: 0;
  table-layout: fixed;
  width: 100%;
}
.item-img,
.item-content {
  float: none !important;
  display: table-cell;
}

Html

<div class="container col-xs-12 col-sm-12 col-md-12">
  <div class="product-item col-xs-12 col-sm-12 col-md-4">
    <a href="#" class="row">
      <div class="item-img col-xs-6 col-sm-6 col-md-6">
        <img src="#">
        <p style="font-size:13px;"><b>Exp date</b></p>

        <p class="price"><b>$1.09</b></p>
      </div>
      <div class="item-content col-xs- col-sm-6 col-md-6">
        <h3>Title</h3>
        <p>Description</p>

      </div>
    </a>
  </div>
</div>

here is fiddle

Krunal Mevada · Answer 3 · 2016-04-05T11:24:11.153

<div class="bs-example" data-example-id="thumbnails-with-custom-content">
    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail"> 
                <img data-src="holder.js/100%x200" alt="100%x200" style="height: 200px; width: 100%; display: block;" src="#" data-holder-rendered="true">
                <div class="caption">
                    <h3>Title</h3>
                    <p>Description</p>
                    <p style="font-size:13px;"><b>Exp date</b></p>
                    <p class="price"><b>$1.09</b></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail"> <img data-src="holder.js/100%x200" alt="100%x200" style="height: 200px; width: 100%; display: block;" src="#" data-holder-rendered="true">
                <div class="caption">
                    <h3>Title</h3>
                    <p>Description</p>
                    <p style="font-size:13px;"><b>Exp date</b></p>
                    <p class="price"><b>$1.09</b></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail"> <img data-src="holder.js/100%x200" alt="100%x200" style="height: 200px; width: 100%; display: block;" src="#" data-holder-rendered="true">
                <div class="caption">
                    <h3>Title</h3>
                    <p>Description</p>
                    <p style="font-size:13px;"><b>Exp date</b></p>
                    <p class="price"><b>$1.09</b></p>                    
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap columns are not the same height

3 Answers3