Using PHP loop to add Bootstrap rows and proper column numbers to elements in wordpress post

    <?php if ( have_posts() ) : ?>
                    <?php
                $i=0;
                  while ( have_posts() ) : the_post(); ?>
                 
                  <?php if ($i%4==0) {  ?>
    <div class="row">
    <?php } ?>
                   
                   
         
           <div class="col-md-3">
   
      <div class="image-wrapper-content">
           <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?> " width="263px" height="263px">
      </div>

<h2><?php the_title(); ?></h2>
<h4><?php echo get_post_meta($post->ID, 'area', true) ?></h4>
<h4><?php echo get_post_meta($post->ID, 'qualification', true) ?></h4>
<h4><?php echo get_post_meta($post->ID, 'classes', true) ?></h4>

</div><!--   col-4  -->

 <?php $i++; ?>

<?php if($i%4==0) {  ?>
    </div>
    <?php } ?>


 <?php endwhile; ?>