CODEWITHSUNDEEP
csstwitter-bootstrap-3
Andi Wilkinson
Andi Wilkinson

Reputation: 662

Displaying Posts in Columns

I am using the following code to display my posts in two rows of three columns: I am using Bootstrap 3 and have not altered any css that would affect the columns. 

<?php   
            $query_recents = new WP_Query ( array( 'post_type' => 'portfolio', 'posts_per_page' => 6, 'paged' => $paged ) );

            if ( $query_recents->have_posts() ):
        ?>
        <div class="recent-posts row">  
            <?php while ( $query_recents->have_posts() ) : $query_recents->the_post(); ?>
                <div class="col-sm-4">
                    <?php get_template_part('templates/content', get_post_format()); ?>
                </div>
            <?php endwhile; ?>
        </div>  
        <?php endif; ?>

this works for the most part except on the second row the first post is shoved down as seen on the image.

could anyone offer advice on how to correct this? Thanks in advance.

enter image description here

Upvotes: 0

Views: 173

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

You will need to apply the Responsive column resets, see: http://getbootstrap.com/css/#grid-responsive-resets and Bootstrap 3.0:responsive column resets section of the documentation

In your case try:

<div class="recent-posts row">  
            <?php 
            $i=0;
            while ( $query_recents->have_posts() ) : $query_recents->the_post(); ?>
                <div class="col-sm-4">
                    <?php get_template_part('templates/content', get_post_format()); ?>
                </div>
            <?php 

            if($i++%3==2) echo '<div class="clearfix visible-sm visible-md visible-lg"></div>';
            endwhile; ?>
</div>

Upvotes: 1

Related Questions