Equal height in all column using css with bootstrap

Question

Currently I am facing a big problem in equal height columns I have searched SO and i have found one solution. Apply the below css in the div (row) even after applying the below css it was no use when In the footer I have 5 Columns in the third column when I enter more data in the entire footer was getting increased but the first and second column was not increasing.

If you see the above image first two column and the last two where not in the equal height

.equal, .equal > div[class*='col-'] {  
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex:1 0 auto;
}

From the marked question only i have take the equal class but it was equal only with first two column but not with other column :(

Here is the fiddle

Thanks in advance

Possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — TylerH, Mar 06 '16 at 19:06

L777 · Answer 1 · 2016-03-06T19:15:34.743

use your container with this css:

#container{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;  
  background: skyblue;
}

#a {
  padding-right: 40px;
  padding-left: 40px;
  background: gold;
}

#b {
  padding-right: 60px;
  padding-left: 60px;
  background: tomato;
}

#c {
  padding-right: 80px;
  padding-left: 80px;
  background: hotpink;
}

<div id=container>
<div id=a>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div><div id=b>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div><div id=c>content<br>content<br>content<br></div>
</div>

you mean to say in the footer class or container – Mr.M Mar 06 '16 at 19:11 — Mr.M, Mar 06 '16 at 19:11

score 0 · Answer 2 · answered Mar 06 '16 at 19:24

Flexbox are the most modern solution, but you can do it also with display:table-cell, that works also in older browsers.

.row{
  display: table;
}

.col{
  display: table-cell;
  padding-left: 15px;
  padding-right: 15px
}

.col:nth-child(1){
  background: red;
}

.col:nth-child(2){
  background: yellow;
}

.col:nth-child(3){
  background: green;
}

.col:nth-child(4){
  background: blue;
}

<div class="row">
  <div class="col">
    Test
  </div>
  <div class="col">
    Test<br>
    Test<br>
  </div>
  <div class="col">
    Test<br>
    Test<br>
    Test<br>
  
  </div>
  <div class="col">
    Test<br>
    Test<br>
    Test<br>
    Test<br>
  </div>



</div>

Note: apply only on col-lg-* and col-md-* classes so on mobile should be responsive anyway.

Equal height in all column using css with bootstrap

2 Answers2