Add class every 4 post like , class_1, class_2, class_3, class_4 and class_1, class_2, class_3, class_4

Hey guys im trying to add a class every 4 post in wordpress loop like in the image above

im using the simple loop of wordpress, I have investigated about using a counter or modulo but have not found a solution, can you guys help me, Thanks.

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="col-md-3">

    <div class="box_ow">
            <div class="rollover_cont" style="background-color: #098EAD; mix-blend-mode: multiply; z-index:1;">
            <h3> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h3>
            <a class="go_project_link" href="<?php the_permalink(); ?>">Go to Project ></a>
            <img class="img-fluid icons_social_img" src="<?php bloginfo('template_directory') ?>/assets/images/icons_social.svg" alt="">
            </div>

        

            <img class="img-fluid" src="<?php bloginfo('template_directory') ?>/assets/images/image_holder.jpg" alt="">
    </div>

</div>


<?php endwhile; else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can try something like this:

if ( have_posts() ) : 
    
    // define count var ##
    $count = 1; 

    while ( have_posts() ) : 

        the_post();

?>
        <div class="class_bg_<?php echo $count; ?>">XXX</div>
<?php

    // iterate ##
    $count ++;

    // reset count if reached 5 ##
    if( 5 == $count ){ $count = 1; }

    endwhile;

endif;

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0