Bootstrap col same height as the tallest

Question

I have a bunch of .col-md-2 in my Bootstrap website. Inside each of these, I have an image, and each of these varies in height.

I want to make all the columns the same height, so I can place the images on a "line".

Here's the HTML:

<div class="row">
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/300/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/200/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/300/200/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/200/200/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/400/" alt="" />
    </div>
</div>

And the CSS:

.col-md-2 {
    background-color: red;
}

.col-md-2:nth-child(odd) {
    background-color: green;
}

.col-md-2 img {
    max-width: 100%;
}

And a working JSFiddle

How can I accomplish this?

Answer 1

You can use display: table-cell and table-layout: fixed

I found a great example here: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

HTML

<div class="row">
  <div class="row-same-height">
    <div class="col-xs-6 col-xs-height"></div>
    <div class="col-xs-3 col-xs-height col-top"></div>
    <div class="col-xs-2 col-xs-height col-middle"></div>
    <div class="col-xs-1 col-xs-height col-bottom"></div>
  </div>
</div>

CSS

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}

I hope this will help you.