Bootstrap logo

Same Height Bootstrap Columns

Posted by Weston Ganger on April 17, 2015

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;
  }
}


Related External Links:


Posted in HTML / CSS and Tagged with bootstrap css height 


Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts