3 element per row in bootstrap/Wordpress - php

Question

I have the following problem: i need to create really simple layout, on each line i would like to have 3 box all of the same size, and if i understood right, in order to achieve this i need to construct a structure like the following:
<div class="row">
<div class=" news col-md-3 col-centered">
</div>
<div class=" news col-md-3 col-centered">
</div>
<div class=" news col-md-3 col-centered">
</div>
</div>
This is my php script in the index.php:
<?php while(have_posts()) : the_post();?>
<div class="row">
<div class=" news col-md-3 col-centered">
<h4><?php the_title();?></h4>
<p><?php the_excerpt(); ?> </p>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
With this code, each box get a <div class="row"> element like the following:
<div class="row">
<div class=" news col-md-3 col-centered">
</div>
</div>
...
How can i fix this?
This is what i get now: if a box as more height than another, it leave the space under it without any element.
the height of the box depends on the content. what i would like to have is something like this:

Answer 1

Just move the row outside of The Loop, so that it's not repeated:
<div class="row">
<?php while(have_posts()) : the_post(); ?>
<div class="news col-md-4 col-centered">
<h4><?php the_title(); ?></h4>
<p><?php the_excerpt(); ?> </p>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
Also, you need to change your column width to col-md-4, since Bootstrap uses a 12-column grid, and you want 3 columns per row.
If you need to actually close out each row after 3 columns are shown, you need to use a counter:
<div class="row">
<?php $i = 1; while(have_posts()) : the_post();?>
<div class="news col-md-3 col-centered">
<h4><?php the_title();?></h4>
<p><?php the_excerpt(); ?> </p>
</div>
<?php if ( $i % 3 === 0 ) { echo '</div><div class="row">'; } ?>
<?php $i++; endwhile; wp_reset_query(); ?>
</div>
This last example will ensure that all floats are cleared, and that each row of elements are on their own lines.