Same Height Bootstrap Columns

Posted By Weston Ganger

A CSS solution to getting the same height Bootstrap columns can be nice when you have different background colors or such.

Here are two different approaches

Method 1:


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

Method 2:


.your-div{
  .row{
    overflow: hidden; 
  }
  [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
  }
}