How can I have my rows of blogs display a 3 column layout using bootstrap for the home.php page?

Hello Devin--

One way to do this is to use a counter within your loop to know how many posts have been created and then add the appropriate row div markup when you need to. I'm sure someone else may have a more elegant way to do this, but here is at least an idea to help you get started:

<?php
<div class="container">
            <div class="row">
                <!--right-->
                <div class="col-md-9">
                    <?php 
                        $counter = 0; 
                        $startRow = true; 
                    ?>
                    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                        <?php 
                            if ($startRow) { 
                                echo '<div class="row">';
                                $startRow = false; 
                            }
                        ?>              
                            <div class="col-sm-4">
                                <article class="post blog-post">
                                    <h3>
                                        <a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a>
                                    </h3>
                                    <div class="post-info">
                                        <em>
                                            <p><em  class="comment-author">By <?php the_author(); ?></em><em class="post-date date"> on <?php echo the_time('l, F jS, Y'); ?></em><em> in <?php the_category(', '); ?>.</em>
                                                <a href="<?php comments_link(); ?>"> <?php comments_number(); ?></a>
                                            </p>
                                        </em>
                                        <p class="post-summary"><?php the_excerpt(); ?></p>
                                    </div>
                                </article>
                            </div>

                        <?php $counter += 1; ?>

                        <?php 
                            if ($counter == 3 ) {
                                echo '</div';
                                $startRow = true;
                                $counter = 0;
                            }
                        ?>                    
                    <?php endwhile; ?>
                    if ($counter != 3) {
                        echo '</div';
                      }

<?php else: ?>
                    <div class="page-header"><h1>Uh Oh!</h1></div>
                    <p>Sorry, for some reason the contents of this page isn't displaying.</p>
                    <?php endif; ?>
                </div><!--/right-->
                <!--left-->
                <div class="col-md-3">
                <?php get_sidebar('blog'); ?><!--/left-->
                </div>
            </div><!--/row-->
        </div><!--/container-->

To explain, there are two points you would need to track within the loop: when to add the opening row div markup and then when to close the row.

To address the opening row div, I just added a $startRow variable and initially set it to true. In the loop, you have an if statement that checks that variable. If true, it will output the opening row div markup. It will then set the $startRow variable to false so that it doesn't output another "row" element on your second or third post.

To address the closing div, I added a counter set initially to 0. Once you add a post, you update the counter by 1. Then there is a second conditional statement at the end of the loop to check whether the counter variable is equal to 3. If it is, it outputs the closing div, resets the counter and sets $startRow to true so that on the next post it would again recreate the opening row div markup.

If your loop ends without any even number of posts, we do a final check of the counter outside of the while loop so that we can properly close the row. Hope that makes sense.

One additional change I made was to switch your individual post containers from col-sm-3 to col-sm-4. Within each row you create, there is another 12 columns for you to work with--regardless of how many columns a parent container may be using in a parent row.

I haven't had a chance to test this, so I apologize for any syntax errors that may found in the example above..

Hey devin-- glad we are getting closer.

Can you confirm that the html is outputting properly? If so, then we can look at the css you have on your elements.

I finally figured it out! Thanks for your help Christopher Rebacz you set the foundation for this, and your counter was the only one I could get to work. Here is my final code:

<?php
$counter = 0;
$startRow = true;
?>
                    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                        <?php
                            if ($startRow) {
                                echo '<div class="row">';
                                $startRow = false;
                            }
                        ?>
<div class="col-sm-3">

                    <article class                    ="post blog-post leftCol">
                    <?php
                        $thumbnail_id = get_post_thumbnail_id();
                        $thumbnail_url= wp_get_attachment_image_src($thumbnail_id, 'thumbnail-size', true);
                        $thumbnail_meta = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
                    ?>
                    <p class="featured-image single-post-image">
                        <img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php echo $thumbnail_meta; ?> featured-image project">
                    </p>
                        <h3>
                            <a href               ="<?php the_permalink(); ?>"><?php the_title(''); ?></a>
                        </h3>
                        <div class                ="post-info">
                            <em>
                                <p><em  class     ="comment-author">By <?php the_author(); ?></em><em class="post-date date"> on <?php echo the_time('l, F jS, Y'); ?></em><em> in <?php the_category(', '); ?>.</em>
                                    <a href       ="<?php comments_link(); ?>"> <?php comments_number(); ?></a>
                                </p>
                            </em>
                            <p class              ="post-summary"><?php the_excerpt(); ?></p>
                        </div>
                    </article>

</div>
                    <?php $counter ++; ?>
                    <?php if ($counter == 3) {
                            echo '</div>';
                            $startRow = true;
                            $counter = 0;
                        }
?>
                    <?php if ($counter != 3 && $counter < 0) {
                            echo '</div>';
                        }
?>
                    <?php endwhile; else: ?>

So basically I added some code so that the featured image for my blogs displays in each column, but I found the problem that was making my rows break I had to change this line

                    <?php if ($counter != 3) {
                            echo '</div>';
                        }
?>

To this:

                    <?php if ($counter != 3 && $counter < 0) {
                            echo '</div>';
                        }
?>

It was sporadically adding closing divs so that rows were just constantly getting nested inside each other until it got a condition where $counter = 3. By adding that condition, it only adds a div to the last row that just happens to not =3, instead of closing every row because every single column can never equal 3. I hope my explanation made sense, I couldn't have done it without you!.

Well I had lots of help, and once you refactored the code I decided on using yours, it works just as well and is a lot easier to read, besides, how I got it to work by making $counter < 0 was pure fluke, I couldn't explain how that actually was supposed to happen.

Thank you, I just showed my client my page last night with your help and he loved it, it was an internship and now I'm finally about to get paid!

Well I had lots of help, and once you refactored the code I decided on using yours, it works just as well and is a lot easier to read, besides, how I got it to work by making $counter < 0 was pure fluke, I couldn't explain how that actually was supposed to happen.

Thank you, I just showed my client my page last night with your help and he loved it, it was an internship and now I'm finally about to get paid!

Well I had lots of help, and once you refactored the code I decided on using yours, it works just as well and is a lot easier to read, besides, how I got it to work by making $counter < 0 was pure fluke, I couldn't explain how that actually was supposed to happen.

Thank you, I just showed my client my page last night with your help and he loved it, it was an internship and now I'm finally about to get paid!