twitter bootstrap - setting column height based on max column height

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.

score 3 · Accepted Answer · answered Nov 07 '16 at 21:50

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

paolobasso · Answer 2 · 2016-11-07T21:53:49.563

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.

@paola, display:flex seems to work in IE 11 and above. What about the other widely used versions of IE (like IE 9, IE10 etc?). Correct me if I missing anything. — JGV, Nov 07 '16 at 21:53
Check the compatibility there: http://caniuse.com/#feat=flexbox It's a partial support in IE11 and IE10 (won't work in IE9-) — paolobasso, Nov 07 '16 at 21:55
I've just check and in IE11 works pretty well: http://i.imgur.com/fZljpiI.png — paolobasso, Nov 07 '16 at 22:02

score 0 · Answer 3 · answered Nov 07 '16 at 21:42

0

Add your own class and set height.

answered Nov 07 '16 at 21:42

Emilio

11

score 0 · Answer 4 · answered Nov 07 '16 at 21:45

Option 1 (for the layzy)

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2 bg-warning my-super-class">
      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 my-super-class">
      .col-sm-6
    </div>
    <div class="col-sm-4 bg-info my-super-class">
      .col-sm-4      
      Some test content
      Some test content
    </div>
  </div>
</div>


.my-super-class {
  min-height: 12em;
}

Option 2: give the col's id, grab said DOMelement by their Id's in JavaScript. Then check for the biggest of them all, and use that value to set the (min-)height for all.

twitter bootstrap - setting column height based on max column height

4 Answers4