equal height columns in bootstrap 3

Question

I have the following html:

<div class="container">
 <div class="row">
 <div class="col-md-2">
 <div class="phone-and-email">
 <p>[phone] [email protected]</p>
 </div>
 </div>
 <div class="col-md-10">
 <div class="icons">
 <div class="row">
 <div class="col-md-4">
 <img src="images/info.png" class="pull-left"/>
 <p>How to buy</p>
 </div>
 <div class="col-md-4">
 <img src="images/delivery.png" class="pull-left"/>
 <p>Free Delivery</p>
 </div>
 <div class="col-md-4">
 <img src="images/gift.png" class="pull-left"/>
 <p>Gift Vouchers</p>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

css:

.phone-and-email, .icons {
 border-top: 2px black solid;
 border-bottom: 2px black solid;
}

I can't make the left column the same height as the right, and I have tried about 5 different solutions. It does work using javascript but I'd rather use css if possible.

How it looks:

wrong

How it should look:

right

• floor: Why not just set the height for all those columns? Make them all like 80px in height. Its looks as if the content you are showing is always going to stay the same.
• cvrebert: CSS-Tricks shows several approaches; in particular, using display: table.

Answer 1

One possible solution is to make use of display table for the row and table-cell to achieve the equal height of both grid sections.

Check this bootply.

HTML:

<div class="container">
 <div id="onerow" class="row">
 <div class="col-md-2 sameheight">
 <div class="phone-and-email">
 <p>[phone] [email protected]</p>
 </div>
 </div>
 <div class="col-md-10 sameheight icons">
 <div>
 <div class="col-md-4">
 <img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left">
 <p>How to buy</p>
 </div>
 <div class="col-md-4">
 <img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left">
 <p>Free Delivery</p>
 </div>
 <div class="col-md-4">
 <img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left">
 <p>Gift Vouchers</p>
 </div>
 </div>
 </div>
 </div>
</div>

CSS:

.phone-and-email, .icons {
 border-top: 2px black solid;
 border-bottom: 2px black solid;
}
img{
 height:20px;
 width:20px;
}
#onerow{
 display: table;
}
.sameheight {
 float: none;
 display: table-cell;
 vertical-align: top;
}