Vimalan Jaya Ganesh Vimalan Jaya Ganesh - 1 month ago 12
HTML Question

twitter bootstrap - setting column height based on max column height

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:

enter image description here

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

Any help / suggestion will be greatly appreciated.

Answer
.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/