...
Bootstrap, CSS, HTML, Tutorials

How to make Bootstrap columns all the same height?

20 December 2018

I am using Bootstrap. How can I make three columns all the same height?
There are different methods available to resolved this issue. But, here I will show you one of the best way to do this.

Current Code:

HTML


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  
<div class="row">
    
<div class="col-xs-4 panel" style="background-color: red">
      some content
      some content
      some content
    </div>

 
    
<div class="col-xs-4 panel" style="background-color: yellow">
      some content
      some content
      some content
      some content
    </div>

    
<div class="col-xs-4 panel" style="background-color: blue">
      some more content
    </div>

  </div>

</div>


Solution1: Using negative margins (doesn’t break responsiveness)

Note: While giving the negative margins to the bootstrap column grid class it doesn’t break the responsiveness.

CSS

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Solution2: Using table

CSS

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Leave a Comments