Grid post page on Wordpress with Bootstrap, the_excerpt(); Problem

Question

I'm trying to create a page on WordPress with a grid which contains al my posts.

The grid works well until when I add the the_excerpt(); for my post. The grid became a mess. The rows are not correct anymore.

This is what I have without the_excerpt();:

and this is what happens with the_excerpt();:

Here my code of page-post.php:

<?php /* Template Name: Blog-3 */ ?>

<?php get_header(); ?>

    <div>

    <div class="container">

        <?php query_posts('post_type=post&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>

        <div class="row">

        <?php if( have_posts() ): ?>

            <?php while( have_posts() ): the_post(); ?>

            <div class="col-sm-6" style="margin-bottom: 65px;">

            <p>
                <?php if ( has_post_thumbnail() ) : ?>
                                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'large' ); ?></a>
                <?php endif; ?>
            </p>

            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

            <p>Posted on <?php echo the_time('F jS, Y');?> by <?php the_author_posts_link(); ?> </p>

            <?php the_excerpt(); ?>

            </div><!-- col -->

            <?php endwhile; ?>

         </div><!-- row -->

    </div><!-- container -->

        <div>
            <span><?php previous_posts_link(__('« Newer','example')) ?></span> <span class="older"><?php next_posts_link(__('Older »','example')) ?></span>
        </div><!-- /.navigation -->

    <?php else: ?>

        <div id="post-404">

            <p><?php _e('None found.','example'); ?></p>

        </div><!-- /#post-404 -->

    <?php endif; wp_reset_query(); ?>

    </div><!-- /#content -->


<?php get_sidebar();
get_footer();?>

Answer 1

The way I tackle this issue is by closing the row every nth column, like so. You basically collect the total number of posts in the current loop then at the end of each loop, increment $i and check whether it's divisible by two wholly (I'm rubbish at explaining this part).

Example: You could tweak this to if ( $i % 3 == 0 ) if you were wanting rows of 3.

The example below can replace your entire container.

<div class="container">

    <?php query_posts('post_type=post&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>

    <?php 
    // Get total posts
    $total = $wp_query->post_count;

    // Set indicator to 0;
    $i = 0;
    ?>

    <?php while( have_posts() ): the_post(); ?>

        <?php if ( $i == 0 ) echo '<div class="row">'; ?>

        <div class="col-sm-6" style="margin-bottom: 65px;">

        <p>
            <?php if ( has_post_thumbnail() ) : ?>
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'large' ); ?></a>
            <?php endif; ?>
        </p>

        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

        <p>Posted on <?php echo the_time('F jS, Y');?> by <?php the_author_posts_link(); ?> </p>

        <?php the_excerpt(); ?>

        </div><!-- col -->

        <?php $i++; ?>

        <?php
        // if we're at the end close the row
        if ( $i == $total ) { 
            echo '</div>';
        } else {
            /** 
             * Perform modulus calculation to check whether $i / 2 is whole number
             * if true close row and open a new one
             */
            if ( $i % 2 == 0 ) {
                echo '</div><div class="row">';
            }
        }
        ?>

    <?php endwhile; ?>

</div><!-- container -->

Answer 2

Just to mention, that since Bootstrap 4, you may use Cards columns.

You can check it here.

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns.

<div class="card-columns">
  <div class="card">...</div>
  <div class="card">...</div>
  ...
</div>