How to create new ROW in Bootstrap 3 after 3 COLS with PHP?

Question

I really need some help here. I am converting my website from plain HTML to WordPress. However i noticed a big problem, on the static website i have a ROW with 3 cols which works just fine. In Wordpress i noticed that the ROW doesn't make a new ROW just continue to add the new col next to the 3rd col.

How can i fix this with a loop or something?

My code:

           <?php $query = new WP_Query(array('post_type' => 'wpa_diensten',  'posts_per_page' => -1));  ?>

            <?php if($query->have_posts()): global $more;  ?>
            <?php while($query->have_posts()): $query->the_post(); $more = 0; ?>

            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top <?php post_class( 'clearfix' ); ?>">
                        <span class="wpa-service-bim-image"></span>
                            <h1><?php the_title(); ?></h1>

                            <?php if ( has_post_thumbnail($post->ID) ): ?>
                                <p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class' => "img-responsive")); ?></p>
                            <?php endif; ?>                               

                            <?php the_content(); ?>

                            <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees verder >></a></p>
            </div><!-- end: col -->

            <?php endwhile; ?>
        <?php endif; ?>
        </div>
    </div>
</div>

Answer 1

add a $count variable outside your while loop with initial value of zero

then inside your while loop after each loop increase the $count with 1

add if condition $count%3==0

if true make new row

else make new col

$count=0
while($query->have_posts()): $query->the_post(); $more = 0;
$count+=1;
if($count%3==0){
//make new row
}
else{
//make new col
}

Answer 2

You can also use the bootstrap responsive column resets instead of creating new rows for each 3 columns. Then you run into trouble with the 2 columns for xs (col-xs-6).

Check out the bootstrap documentation: http://getbootstrap.com/css/#grid-responsive-resets

In your case you can add a reset for sm after each 2 columns and a reset after each 3 columns for md and lg.

See the example below:

<?php $query = new WP_Query(
    array(
        'post_type' => 'wpa_diensten',  
        'posts_per_page' => -1
    )
); ?>

<?php $i = 1; // set a counter before the loop ?>

<?php if($query->have_posts()): global $more;  ?>

    <div class="row">

    <?php while($query->have_posts()): $query->the_post(); $more = 0; ?>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top <?php post_class( 'clearfix' ); ?>">
            <span class="wpa-service-bim-image"></span>
            <h1><?php the_title(); ?></h1>

            <?php if ( has_post_thumbnail($post->ID) ): ?>
                <p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class' => "img-responsive")); ?></p>
            <?php endif; ?>                               

            <?php the_content(); ?>

            <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees verder >></a></p>

        </div><!-- end: col -->

        <?php if ( $i%2 == 0 ){ echo '<div class="clearfix visible-sm-block">'; } // show clearfix after each 2 cols for xs ?>
        <?php if ( $i%3 == 0 ){ echo '<div class="clearfix visible-lg-block visible-md-block">'; } // show clearfix after each 3 cols for lg and md ?>

    <?php endwhile; ?>

    </div><!-- end: row -->

<?php endif; ?>

Answer 3

I think this is how your code should look. You might have to tweak the numbers...I think the maths is right! All this does is echo out the opening and closing div in the appropriate places if the loop we are on is a multiple of 3.

<?php $i = 1; # start a loop counter at 1 ?>
<?php if($query->have_posts()): global $more;  ?>
<?php while($query->have_posts()): $query->the_post(); $more = 0; ?>

<?php if ($i % 3) == 0 : ?><div class="row"><?php endif; # If the number of the loop we are on divided by 0 is 3, we are in a "third" loop and you want a row opening div?>

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top <?php post_class( 'clearfix' ); ?>">
            <span class="wpa-service-bim-image"></span>
                <h1><?php the_title(); ?></h1>

                <?php if ( has_post_thumbnail($post->ID) ): ?>
                    <p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class' => "img-responsive")); ?></p>
                <?php endif; ?>                               

                <?php the_content(); ?>

                <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lees verder >></a></p>
</div><!-- end: col -->

<?php if ($i % 3) == 0 : ?><div class="row"><?php endif; # If the number of the loop we are on divided by 0 is 3, we are in a "third" loop and you want a row closing div ?>

<?php $i++;
<?php endwhile; ?>