Getting Custom Post Loop to display in Bootstrap 3 column grid

I’m trying to get my custom post loop to show in the 3 column bootstrap grid. Right now they are stacked on top of each other vertically.

I know I must be missing something simple – have looked at other questions on this and the code is totally different from mine – I just worked it all out like this. It works great, except the layout.

Here is my code:

    <section id="services">

    <div class="container">

        <h2></h2>
        <p class="lead"></p>

    <?php query_posts('posts_per_page=3&cat=6&post_type=our_services'); ?>

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

        <div class="row">


            <div class="col-sm-4">


<?php if ( has_post_thumbnail()) { $url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>

    <img src="<?php echo $url; ?>" alt="<?php the_title() ?>">

                <h3><?php the_title() ?></h3>
                <p><?php the_excerpt() ?></p>
                <a href="<?php the_permalink() ?>" class="btn btn-success">Learn more <i class="fa fa-angle-right" aria-hidden="true"></i></a>


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


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

         <?php } ?>

        <?php endwhile; endif; ?>

    </div><!-- container -->
</section><!-- services -->

<?php wp_reset_query(); ?>

Read more here: Getting Custom Post Loop to display in Bootstrap 3 column grid

Leave a Reply

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