Bootstrap Equal Column Heights

Question

I am trying to make my Bootstrap column's all the same height. Right now if one column has more content than another the columns float around and things don't look "square".

Here is a fiddle example of what I mean:

https://jsfiddle.net/jjq9gygr/

I have tried the display: flex approach but since my html does not have a new .row container for every 3 col-xs-4 columns, all the columns go on the same row instead of wrapping to the next line after 3 columns. I hope that makes sense.

If there is a way to keep the HTML as is and get the result I am after that would be great. Any ideas or recommendations are helpful.

<div class="container">
<div class="row">
 <div class="col-xs-4 red">
 <h3>
 Column 1
 </h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 <div class="col-xs-4 pink">
<h3>
 Column 2
 </h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 <div class="col-xs-4 yellow">
 <h3>
 Column 3
 </h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 <div class="col-xs-4 orange">
 <h3>
 Column 4
 </h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 <div class="col-xs-4 blue">
 <h3>
 Column 5
 </h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 <div class="col-xs-4 green">
 <h3>
 Column 6
 </h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 <div class="col-xs-4 navy">
 <h3>
 Column 7
 </h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
</div>

• sn3ll: You have 7 divs that have the class col-xs-4 in the same row. The elements in a row can't add up to more than 12, which means no more than 3 col-xs-4's. You should read over the grid system documentation here getbootstrap.com/css/#grid
• hungerstar: @sn3ll One could call this a "hack," but there are times when you want to float a bunch of items and allow them to wrap/re-flow on their own as needed. Sometimes .row is too restrictive.
• sn3ll: I'm not saying I wouldn't do it if I had too ;-)

Answer 1

Tell your rows flex containers and tell them to wrap.

.row {
 display: flex;
 flex-wrap: wrap;
}

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.row {
 display: flex;
 flex-wrap: wrap;
}
.col-xs-4 {
 margin-bottom: 30px;
}
.red {
 background-color: red;
}
.pink {
 background-color: pink;
}
.yellow {
 background-color: yellow;
}
.orange {
 background-color: orange;
}
.blue {
 background-color: MediumTurquoise;
}
.green {
 background-color: green;
}
.navy {
 background-color: PaleGoldenRod;
}

<div class="container">
 <div class="row">
 
 <div class="col-xs-4 red">
 <h3>Column 1</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 <div class="col-xs-4 pink">
 <h3>Column 2</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 <div class="col-xs-4 yellow">
 <h3>Column 3</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 <div class="col-xs-4 orange">
 <h3>Column 4</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 <div class="col-xs-4 blue">
 <h3>Column 5</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 <div class="col-xs-4 green">
 <h3>Column 6</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 <div class="col-xs-4 navy">
 <h3>Column 7</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 </div>
</div>

If you're just starting your project you could switch to Bootstrap 4 which has flexbox baked into the grid system. Since BS4 doesn't have xs you'd need to make a minor adjustment to your column classes from .col-xs-4 to .col-4.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
.col-4 {
 margin-bottom: 30px;
}
.red {
 background-color: red;
}
.pink {
 background-color: pink;
}
.yellow {
 background-color: yellow;
}
.orange {
 background-color: orange;
}
.blue {
 background-color: MediumTurquoise;
}
.green {
 background-color: green;
}
.navy {
 background-color: PaleGoldenRod;
}

<div class="container">
 <div class="row">
 
 <div class="col-4 red">
 <h3>Column 1</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 <div class="col-4 pink">
 <h3>Column 2</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 <div class="col-4 yellow">
 <h3>Column 3</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 <div class="col-4 orange">
 <h3>Column 4</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 <div class="col-4 blue">
 <h3>Column 5</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 <div class="col-4 green">
 <h3>Column 6</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 <div class="col-4 navy">
 <h3>Column 7</h3>
 <p>Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. Differnt amount of text. </p>
 </div>
 
 </div>
</div>

Answer 2

What you're looking for is the class .row-eq-height which is attached to the row containers. It's a great addition to bootstraps base code. This page explains more and below is the CSS highlighting what you need.

http://getbootstrap.com.vn/examples/equal-height-columns/

 /*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}
/*
 * Styles copied from the Grid example to make grid rows & columns visible.
 */
.container {
 padding-right: 15px;
 padding-left: 15px;
}
h4 {
 margin-top: 25px;
}
.row {
 margin-bottom: 20px;
}
.row .row {
 margin-top: 10px;
 margin-bottom: 0;
}
[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);
}
/*
 * Callout styles copied from Bootstrap's main docs.
 */
/* Common styles for all types */
.bs-callout {
 padding: 20px;
 margin: 20px 0;
 border-left: 3px solid #eee;
}
.bs-callout h4 {
 margin-top: 0;
 margin-bottom: 5px;
}
.bs-callout p:last-child {
 margin-bottom: 0;
}
.bs-callout code {
 background-color: #fff;
 border-radius: 3px;
}
/* Variations */
.bs-callout-danger {
 background-color: #fdf7f7;
 border-color: #d9534f;
}
.bs-callout-danger h4 {
 color: #d9534f;
}
.bs-callout-warning {
 background-color: #fcf8f2;
 border-color: #f0ad4e;
}
.bs-callout-warning h4 {
 color: #f0ad4e;
}
.bs-callout-info {
 background-color: #f4f8fa;
 border-color: #5bc0de;
}
.bs-callout-info h4 {
 color: #5bc0de;
}

Answer 3

You can just use JQ plugin jquery.matchHeight.js that works also on other html frameworks and it is simply to use:

https://github.com/liabru/jquery-match-height

You can use via JS:

$('.row .col-xs-4').matchHeight();

Or use data:

<div class="col-xs-4 red" data-mh="my-group">Red</div>
<div class="col-xs-4 blue" data-mh="my-group">Blue</div>