Bootstrap 3 Equal Height Columns

Equal height columns within a row in Bootstrap 3 using flexbox.

by Michael Sherry

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="container">
<div class="row is-flex">
    <div style="background:#333;" class="col-sm-4">
      <p style="color:#ccc;">Column<br /><br /><br /><br /><br /><br /></p>
      <p>Column</p>
    </div>
    <div style="background:#999;" class="col-sm-4">
     <p>Column<br /><br /></p>
    </div>
    <div style="background:#ccc;" class="col-sm-4">
     <p>Column<br /></p>
    </div>
</div>
</div>

CSS

.row.is-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}
/*
* And with max cross-browser enabled.
* Nobody should ever write this by hand. 
* Use a preprocesser with autoprefixing.
*/
.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}