Wordpress Loop posts in Bootstrap 3 grid layout

Question

I am using Bootstrap 3 within Wordpess and have an issue getting my archive posts to display across the page in a grid format. My wordpress loop code is...

<?php if ( have_posts() ) : ?>

<?php
$args=array(
'post_type' => 'artist',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '';
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li>
<img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" />
</li>

<?php endwhile;
}
wp_reset_query(); 
?>

<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

This displays a list containing the post's image. Right now, they list one after the other down the page.

How would I get them to use my bootstrap grid showing 4 across the page, then the next 4 in the row beneath, then the next 4 in row beneath that like this...

<div class="row">

<div class="col-md-3">
<li>image 1 goes here</li>
</div>

<div class="col-md-3">
<li>image 2 goes here</li>
</div>

<div class="col-md-3">
<li>image 3 goes here</li>
</div>

<div class="col-md-3">
<li>image 4 goes here</li>
</div>

</div>

etc. Is that possible? Basically i want the Wordpress loop to list ALL of my posts 4 across the page instead of one after the other in a html list down the page.

Answer 1

// Opening container or wrap outside of the loop
<div class="container my-container">
// start the loop
<?php
  $args=array(
     'post_type' => 'post',
     'post_status' => 'publish',
     'posts_per_page' => 18
    );

  $my_query = null;
  $my_query = new WP_Query($args);

  if( $my_query->have_posts() ) {

    $i = 0;
    while ($my_query->have_posts()) : $my_query->the_post();
  // modified to work with 3 columns
  // output an open <div>
  if($i % 3 == 0) { ?> 

  <div class="row">

  <?php
  }
  ?>

    <div class="col-md-4">
      <div class="my-inner">
      // all your content, title, meta fields etc go here.
      </div>
    </div>  
// increment the loop BEFORE we test the variable
      <?php $i++; 
      if($i != 0 && $i % 3 == 0) { ?>
        </div><!--/.row-->
        <div class="clearfix"></div>

      <?php
       } ?>

      <?php  
        endwhile;
        }
        wp_reset_query();
        ?>

</div><!--/.container-->  

Answer 2

I just think all of you have complicated the thing very much.The main problem of all of your solutions is that if you do not have the equal number of elements in the row you do not close the final row, and you get a real mess...

Let me explain my solution with only one IF (similar to yours, but without complicated stuff, and adjustable)

Open row
Run loop
If it is the last element in row close row, and open another one
Close the final row

And here is the example in the loop (I do not get into which WP_Query you display and how did you get your posts)

$columns_num = 4; // The number of columns we want to display our posts
$i = 0; //Counter for .row divs

echo '<div class="row">';

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

        echo '<div class="single-product-archive col-md-' . 12 / $columns_num . '">'
            get_template_part( 'template-parts/content', get_post_format() );
        echo '</div>';

        if($i % $columns_num == $columns_num - 1 ) {  
            echo '</div> <div class="row">';
        }

        $i++;

    endwhile;

echo '</div>';

Note that you can change the value of $columns_num = 4. You can even make a select box from your customizer and to just select how many columns per row you want. Ofcourse, value must divide number 12 (bootstrap columns) without rest. So just 1, 2, 3, 4 and 6 are acceptible.