Border for WordPress post loop, grid using Bootstrap

Have a loop going with 3 posts per row. Having trouble with making a border wrap around each individual post. Instead, it’s making a border that covers the top post extending to bottom post on the grid. See screenshot

I tried adding a different class name other than generic selector used here, but didn’t seem to work. Any advice would be appreciated. First project using WordPress with Bootstrap. Using Sass for styling, hence the section divs. Thanks in advance!

.col-sm-4 {
        border: 1px solid gray;
    }
<section id="blog-section">
    <div class="container">   
        <div class="col-sm-12">
            <h1>Blog Title</h1>
        </div>
        <div class="row">
        </div>
    </div>


    <div class="container">    
        <div class="row">
            <div class="col-sm-4 text-center">
                <?php $i = 1 ?>
                <?php $posts = get_posts(array(
    'post_type' => 'post',
    'posts_per_page' => -1
));
                foreach ($posts as $post) : start_wp(); ?>
                <?php if ($i == 1): ?>

                <a class="perm_link" href="<?php the_permalink(); ?>">
                    <h2><?php the_title(); ?></h2>
                    <div class="blog-image image-responsive"><?php the_post_thumbnail('thumbnail'); ?></div></a>
                <p><?php the_excerpt(); ?></p>
                <span class="shortlink">
                    <?php the_shortlink("Read More"); ?>
                </span>
                <?php endif; ?>
                <?php if($i == 3){$i = 1;} else {$i++;} ?>
                <?php endforeach; ?>
            </div>

<div class="col-sm-4 text-center">
                <?php $i = 1 ?>
                <?php $posts = get_posts(array(
    'post_type' => 'post',
    'posts_per_page' => -1
));
                foreach ($posts as $post) : start_wp(); ?>
                <?php if ($i == 2): ?>
                <h2><?php the_title(); ?></h2>
                <div class="blog-image image-responsive"><?php the_post_thumbnail('thumbnail'); ?></div>
                <p><?php the_excerpt(); ?></p>
                <span class="shortlink">
                    <?php the_shortlink("Read More"); ?>
                </span>
                <?php endif; ?>
                <?php if($i == 3){$i = 1;} else {$i++;} ?>
                <?php endforeach; ?>
            </div>

            <div class="col-sm-4 text-center">
                <?php $i = 1 ?>
                <?php $posts = get_posts(array(
    'post_type' => 'post',
    'posts_per_page' => -1
));
                foreach ($posts as $post) : start_wp(); ?>
                <?php if ($i == 3): ?>
                <h2><?php the_title(); ?></h2>
                <div class="blog-image image-responsive"><?php the_post_thumbnail('thumbnail'); ?></div>
                <p><?php the_excerpt(); ?></p>
                <span class="shortlink">
                    <?php the_shortlink("Read More"); ?>
                </span>
                <?php endif; ?>
                <?php if($i == 3){$i = 1;} else {$i++;} ?>
                <?php endforeach; ?>
            </div>
        </div>    
    </div>
</section>

Read more here: Border for WordPress post loop, grid using Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *