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.
// 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-->