Make bootstrap columns all same height when structured in different rows?

Question

The bootstrap grid layout below shows that in its large configuration, there are 9 elements, arranged like this:

[Glyph 1] [Glyph 2] [Glyph 3]

[Title 1] [Title 2] [Title 3]

[Text 1] [Text 2] [Text 3]

The text boxes have a coloured background. I would like this coloured background to be the same size for each text box, even when there are more lines of text in one of the boxes. It looks as though .row-eq-height would be a good start, but of course all my large text divs aren't in the same row and there are other divs in the rows too.

<div class="container-fluid PageView text-center">
 <div class="row Page2">
 <div class="col-sm-4">
 <div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
 </div> 
 </div>
 <div class="col-sm-4">
 <div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="box">
 <div class="row">
 <div class="col-xs-6 col-sm-12">
 <h2><strong>Title 1</strong></h2>
 </div>
 <div class="col-xs-6 col-sm-12">
 <p class="lead">Text 1</p>
 </div>
 </div>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="box">
 <div class="row">
 <div class="col-xs-6 col-sm-12">
 <h2><strong>Title 2</strong></h2>
 </div>
 <div class="col-xs-6 col-sm-12">
 <p class="lead">Much Longer text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed turpis quis lacus sagittis aliquam mollis at ipsum. Ut a blandit metus, et aliquet nunc. Ut commodo lorem tortor, ullamcorper.</p>
 </div>
 </div>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="box">
 <div class="row">
 <div class="col-xs-6 col-sm-12">
 <h2><strong>Title 3</strong></h2>
 </div>
 <div class="col-xs-6 col-sm-12">
 <p class="lead">Text 3</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

Any Suggestions would be much appreciated.

• G-Cyrillus: css will not to do thiss with this HTML structure, you will need js to retrieve heights and aplly the tallest to .col-sm-4

Answer 1

Sorry about the last post, you can use Jquery to get even heights. P:S does not work well in the code snippet. Probably coz not added the bootstrap JS library

$(document).ready(function() {
 var h = new Array();
 h[0] = $(".eqheight1").height();
 h[1] = $(".eqheight2").height();
 h[2] = $(".eqheight3").height();
 var largest = h.sort(function(a, b) {
 return a - b
 }).slice(-1);
 $(".eqheight3,eqheight2,.eqheight1").height(largest);
});

.eqheight1,
.eqheight2,
.eqheight3 {
 background: #cfcfcf;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid PageView text-center">
 <div class="row Page2">
 <div class="col-sm-4">
 <div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="box">
 <div class="row">
 <div class="col-xs-6 col-sm-12">
 <h2><strong>Title 1</strong></h2>
 </div>
 <div class="col-xs-6 col-sm-12 eqheight1">
 <p class="lead">Text 1</p>
 </div>
 </div>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="box">
 <div class="row">
 <div class="col-xs-6 col-sm-12">
 <h2><strong>Title 2</strong></h2>
 </div>
 <div class="col-xs-6 col-sm-12 eqheight2">
 <p class="lead">Much Longer text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed turpis quis lacus sagittis aliquam mollis at ipsum. Ut a blandit metus, et aliquet nunc. Ut commodo lorem tortor, ullamcorper.</p>
 </div>
 </div>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="box">
 <div class="row">
 <div class="col-xs-6 col-sm-12">
 <h2><strong>Title 3</strong></h2>
 </div>
 <div class="col-xs-6 col-sm-12 eqheight3">
 <p class="lead">Text 3</p>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

• George Edwards: Is it possible to make this work with a media query etc., so that it only affects the layout for large screens?