How to add 2 Column Blog Post in Bootstrap WordPress

Question

Help Please. I want to add 2 column blog post for bootstrap WordPress theme. I am able to make first half only, dynamically.

I want this on home page only. I have little sense of bootstrap grid, but don't know to add with WordPress dynamically on home page.

Index.php

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package bootstrap
 */

get_header();
?>

<div id="primary" class="content-area col-xs-6 col-sm-6">
    <main id="main" class="site-main">
        <?php
        if ( have_posts() ) :
            if ( is_home() && ! is_front_page() ) :
        ?>
                <header>
                    <h1 class="page-title screen-reader-text">
                        <?php single_post_title(); ?>
                    </h1>
                </header>
            <?php
            endif;

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

                /*
                * Include the Post-Type-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 Type name) and that will be used instead.
                */
                get_template_part( 'template-parts/content', get_post_type() );

            endwhile;

            the_posts_navigation();

        else :

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

        endif;
        ?>

    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_footer();

Answer 1

Try this.

Index.php

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package bootstrap
 */

get_header();
?>

<div id="primary" class="content-area col-md-8">
    <main id="main" class="site-main">
        <?php
        if ( have_posts() ) :
            if ( is_home() && ! is_front_page() ) :
        ?>
                <header>
                    <h1 class="page-title screen-reader-text">
                        <?php single_post_title(); ?>
                    </h1>
                </header>
            <?php
            endif;

            /* Start the Loop */ ?>
            <div class="row">
                <?php
                while ( have_posts() ) :
                    the_post(); ?>
                    <div class="col-xs-12 col-sm-6">
                        <?php
                        /*
                        * Include the Post-Type-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 Type name) and that will be used instead.
                        */
                        get_template_part( 'template-parts/content', get_post_type() );
                        ?>
                    </div>

                <?php endwhile; ?>
            </div>
            <?php the_posts_navigation();

        else :

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

        endif;
        ?>

    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_footer();

Result

Answer 2

If you want two columns in a row in bootstrap, as you can check in the docs (and from your code I'm assuming you're using bootstrap 3) it's enough to put them inside a row:

<div class="row">
    <div class="col-xs-6 col-sm-6"></div>
    <div class="col-xs-6 col-sm-6"></div>
</div>

But you'll have to decide how to cycle trough your posts, because half of them needs to be in the first div and the other half in the second div. So, you'll need to use another method for that, like querying for two pages instead of one (see the docs here).