Wordpress Blog posts loop with bootstrap grid layout

Question

I am having trouble with integrating WordPress loop to display 2 posts per row and a sidebar next to them. So the main idea would have to be that there are 2 posts per row which take 4+4 of the bootstrap layout and the rest 4 that are left is for the sidebar? Can anyone help me out with this? Here is the code.

<?php
get_header(); ?>
<section class="feature-image feature-image-default" >
    <h1 class="page-title">BLOGG</h1>
    </section>

    <!-- BLOG CONTENT -->
 <div class="container">
     <div class="row" id="primary">

             <?php
             if ( have_posts() ) :


                if ( is_home() && ! is_front_page() ) : ?>
                <div class="col-sm-4" id="content" role="main">
                    <header>

                        <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>

                    </header>
                </div>
                <?php
                endif;

                /* Start the Loop */
                while ( have_posts() ) : the_post();

                    /*
                     * Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'template-parts/content', get_post_format() );

                endwhile;

                the_posts_navigation();

             else :

                get_template_part( 'template-parts/content', 'none' );

             endif; ?>

         </main> <!--content -->

         <!-- SIDEBAR -->
         <aside class="col-sm-4">
             <?php get_sidebar(); ?>
         </aside>

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



<?php

get_footer(); ?>

Answer 1

I made something like this...
BTW: you can try to skip else : get_template_part( 'template-parts/content', 'none' ); - it should work.

Don't forget to add col-sm-4 -class to div s in template-parts/content-*.php

<?php
get_header(); ?>
<section class="feature-image feature-image-default" >
    <h1 class="page-title">BLOGG</h1>
    </section>

    <!-- BLOG CONTENT -->
 <div class="container">
     <div class="row" id="primary">

             <?php
             if ( have_posts() ) :

                $i = 0; //counter, set it to 0 BEFORE while loop

                if ( is_home() && ! is_front_page() ) : ?>
                <div class="col-sm-4" id="content" role="main">
                    <header>

                        <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>

                    </header>
                </div>
                <?php
                endif;

                /* Start the Loop */
                while ( have_posts() ) : the_post();

                    /*
                     * Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */

                    /* 
                         Check if it's our first post, to add.
                    */
                    if ( $i == 0) :
                       echo '<div class="row">' ; //open row for first 2 articles
                    endif;
                    /* 
                         check if our post number is even 
                    */
                    if ( $i % 2 == 0):
                        echo '</div> <div class="row">'; //close old row and open new, for next 2 articles
                    endif;

                    get_template_part( 'template-parts/content', get_post_format() );
                   $i++; //increment our counter 
                endwhile;

                /*
                    after loop close our initial div
                */

                echo '</div>';

                the_posts_navigation();

             else :

                get_template_part( 'template-parts/content', 'none' );

             endif; ?>

         </main> <!--content -->

         <!-- SIDEBAR -->
         <aside class="col-sm-4">
             <?php get_sidebar(); ?>
         </aside>

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

<?php get_footer(); ?>