twitter bootstrap - setting column height based on max column height [duplicate]

Question

I want to make all the columns to same height in a row. So, all columns in a row should have the same height as any column with max height.

Fiddler: https://jsfiddle.net/ebwwvy6m/11/

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2 bg-warning">
      This is a col-sm-2
      Some test content
       Some test content
        Some test content
         Some test content
    </div>
    <div class="col-sm-6 bg-success">
      .col-sm-6
    </div>
    <div class="col-sm-4 bg-info">
      .col-sm-4      
      Some test content
      Some test content
    </div>
  </div>
</div>

Issue:

Both column 2 and column 3 should expand to have the same height as column 1.

Any help / suggestion will be greatly appreciated.

Answer 1

.row-eq-height{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Add this class with your row class.

<div class="container-fluid">
  <div class="row-eq-height row">
    <div class="col-sm-2 bg-warning">
      This is a col-sm-2
      Some test content
       Some test content
        Some test content
         Some test content
    </div>
    <div class="col-sm-6 bg-success">
      .col-sm-6
    </div>
    <div class="col-sm-4 bg-info">
      .col-sm-4      
      Some test content
      Some test content
    </div>
  </div>
</div>

https://jsfiddle.net/ebwwvy6m/16/

Answer 2

The best way to do this is using display:flex; on the parent row and on the col.

Working Demo.

.example {
  display: flex;
}
.example .exaple-items {
  display: flex;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row example">
    <div class="col-sm-2 bg-warning exaple-items">
      This is a col-sm-2
      Some test content
       Some test content
        Some test content
         Some test content
    </div>
    <div class="col-sm-6 bg-success exaple-items">
      .col-sm-6
    </div>
    <div class="col-sm-4 bg-info exaple-items">
      .col-sm-4      
      Some test content
      Some test content
    </div>
  </div>
</div>

Since flextbox is a new CSS feature check the browser compatibility: caniuse.com

And use the vendor prefix:

.example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

If you want to know more about display:flex; read this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

P.S. The new bootstrap v4 will have this feature integrated.