row-eq-height

row-eq-height

by Mats

HTML

<h2>Bootstrap Columns with content of different heights yet having same height</h2>
<div class="row row-eq-height">
  <div class="col-xs-6">
    Tall Column
    <br> Tall Column
    <br> Tall Column
    <br>
  </div>
  <div class="col-xs-3">
    Short Column
  </div>
  <div class="col-xs-3">
    Tall Column
    <br> Taller
    <br>
  </div>
  <div class="col-xs-4">
    Tallest Column
    <br> Tallest Column
    <br> Tallest Column
    <br> Tallest Column
    <br> Tallest Column
    <br> Tallest Column
    <br> Tallest Column
    <br> Tallest Column
    <br> Tallest Column
    <br> Tallest Column
    <br> Tallest Column
    <br> Tallest Column
    <br>
  </div>
  <div class="col-xs-4">
    Tall Column
    <br> Tall Column
    <br> Tall Column
    <br>
  </div>
  <div class="col-xs-4">
    Short Column
  </div>
  <div class="col-xs-4">
    Short Column
  </div>
  <div class="col-xs-3">
    Tall Column
    <br> Taller
    <br> Taller
    <br> Taller
    <br> Taller
    <br>
  </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */


/*@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');*/

body {
  margin: 10px;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}


/*
h4 {
  margin-top: 25px;
}
*/

.row {
  margin-bottom: 20px;
}

[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86, 61, 124, .2);
}