What i would like to do;

if there is one post in custom post type, it should show up in one full column of bootstrap.

| post |

If there are two posts, they should show up in two half column (one-half).

| post | post |

If there are three posts, the should show up in three third columns (one-third).


And then it starts again from beginning.


| post |

I thought, i can use count_post function, but its not working as i expect.

For rows im using elements from this post:

Posts in Multiple Columns and Rows with one single loop

This post was not really helpfull: Set div columns in a loop by post count

Any ideas? Thanks.

1 Answer 1


This will need to be customized for your situation but it should be helpful.

  // Start the loop.
  $i = 0; while ( $the_query->have_posts() ) : $the_query->the_post();
  if ( $i == 1 ) : ?>
    <div class="col-md-12">
  <?php elseif ( $i == 2 ) : ?>
    <div class="col-md-6">
  <?php elseif ( $i == 3 ) : ?>
    <div class="col-md-4">
  <?php endif; ?>

  // Include the carousel template content.
  get_template_part( 'template-parts/content', get_post_format() ); ?>


  // End the loop.
  $i++; endwhile;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.