how to use wordpress loop with grid system bootstrap? - wordpress

Question

i want to show a strip row with two column contain wordpress loop content (title, exrept in green blocs) every row have columns with white and grey background that invert in each row like chess checker .
see the image for more detail.

Answer 1

EDITED ANSWER
I believe this is what you are looking for. This loops through all the posts you have and then sorts them the way your sketch looks.
<div class='container'>
<?php
$args = array(
'post_type' => 'post' // Get only posts
);
$the_query = new WP_Query ( $args ); // build query
$count = $the_query->post_count; // Check number of posts
<style>
.row:nth-child(even) .col-5:nth-child(even) { /* Select every even row and and even post */
background: #ddd;
}
.row:nth-child(odd) .col-5:nth-child(odd) { /* Select every odd row and odd post*/
background: #ddd;
}
</style>
<?php
while ( $the_query -> have_posts() ) : $the_query -> the_post();
$post_index = $the_query->current_post + 1; // $current_post = gets the post index in loop
if ( $post_index % 2 != 0 ) { // Open div if post is odd
echo '<div class="row" style="border: 2px solid red; padding: 20px; margin:30px;">';
}
if ( $post_index % 2 != 0) { // If post is odd then give one class
?>
<div class="col-xs-5 <?php echo "post_$post_index" ?>" style="border: 1px solid green;">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php
} else {
?>
<div class="col-xs-5 col-xs-push-2 <?php echo "post_$post_index" ?>" style="border: 1px solid green;">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php } // End if ( $post_index % 2 != 0)
if ( $post_index % 2 == 0 ) { // Close div if post is even
echo "</div>";
}
endwhile;
wp_reset_postdata();
?>
</div>
<!-- /.container -->
ORIGINAL ANSWER
This is the html you're looking for. Just change the class names to suit your needs. Since it is WordPress loop you have to do if else statements for when to start a new row and when to have a different color for the background.
.row {
border: 2px solid red;
padding: 10px 20px;
margin: 30px 0;
}
.col-xs-5 {
border: 1px solid green;
height: 100px;
}
.gray-bg {
background: #ccc;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-5"></div>
<div class="col-xs-5 col-xs-push-2 gray-bg"></div>
</div>
<div class="row">
<div class="col-xs-5 gray-bg"></div>
<div class="col-xs-5 col-xs-push-2"></div>
</div>
<div class="row">
<div class="col-xs-5"></div>
<div class="col-xs-5 col-xs-push-2 gray-bg"></div>
</div>
<div class="row">
<div class="col-xs-5 gray-bg"></div>
<div class="col-xs-5 col-xs-push-2"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>