Add Columns to Understrap / Underscores Blog Page Template Posts - php

Question

I'd like to customize the Underscores Wordpress Theme Blog Template to include columns around each blog post entry.
Ideally, these would become a grid of posts with pagination, but right now I'm just trying to get the grid to work.
This is from the content.php file:
<?php
/**
* Post rendering content according to caller of get_template_part.
*
* #package understrap
*/
?>
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<header class="entry-header">
<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
'</a></h2>' ); ?>
<?php if ( 'post' == get_post_type() ) : ?>
<div class="entry-meta">
<?php understrap_posted_on(); ?>
</div><!-- .entry-meta -->
<?php endif; ?>
</header><!-- .entry-header -->
<?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>
<div class="entry-content">
<?php
the_excerpt();
?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'understrap'
),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php understrap_entry_footer(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
</div>
Thanks for your help!

Answer 1

i assume you talking about UnderStrap, not about Underscores, right?
To add the Bootstrap grid (http://getbootstrap.com/docs/4.1/layout/grid/) to your article/blog view you have to do two things:
Step 1
Wrapping an outside row around your loop.
To do this:
open the themes index.php and search for:
<main class="site-main" id="main">
Add the opening right behind this so that you have this:
<main class="site-main" id="main"><div class="row">
Now add the closing tag right before the closing tag:
</div></main>
Step 2
While the outside row wrapper needs to be added just once around all articles you need to add a Bootstrap col class plus the right size variable to your loop-templates/content.php file. So that it applies to all articles in your loop.
Open the file and add this:
<div class="col-6">
right before the opening <article> tag.
The col-6 class means "use 6/12 of space, e.g. 50%.
So you will have two articels side-by-side.
Of course you can use col-4 (4/12=33.33%) to have three articles side-by-side etc.
Depending on your needs another good starting point would be to utilize the Bootstrap card-deck component:
http://getbootstrap.com/docs/4.1/components/card/#card-decks