Variable-heigth col-sm-4 divs on bootstrap - html

Question

In my page I have three columns and many rows to show the following elements
<div class="col-sm-4">
<img src="<?php echo $myURL; ?>" class="img-responsive img-thumbnail">
<p class="lead"><?php echo $mytext; ?></p>
</div>
The display is perfect when all the $mytext are the same size (number of lines). However, if in a row elements A and B have say 2 lines of $mytext and the element C has 3 lines, the element C on the next row won't be displayed.
How can I prevent this? Ideally, the row height should be the highest of the height of the three elements in the row.
EDIT: If you go to http://bit.ly/1HfHiqC and reduce the width of the window, you will see what I am talking about.

Answer 1

If you are generating the content with a loop, lets say like this
foreach ($posts as $post) {
echo '<div class="col-sm-4">';
...
}
then you need to set a counter to add an clearfix class to every col-n * x = 12 DIV, to clear the floats. In you example you have n = 4 and that means you have to clear it on every 3rd iteration. To sum it up, whenerver your row is full, and the next row begins with a new set of cols, you have to add a class to the first div in that row.
$clearfix = 0;
foreach ($posts as $post) {
if ($clearfix % 3 == 0) { $clear_class = "clearfix"; } else { $clearfix = ""; }
echo '<div class="col-sm-4 '.$clear_class.'">';
...
$clearfix++;
}
And in your css you'd add the following
.clearfix { clear: both; }
That should solve your problem.