Masonry grid with bootstrap 4

Question

I have the following code that is supposed to display a masonry grid using bootstrap 4. I've tested the code but the grid will not be displayed correctly on desktop and tablets. On mobile instead there is no problem with the columns. Is there a way to fix this issue? I've loaded the masonry.js script and I've used the snippet that I've found inside the masonry official documentations.

<?php
$args = array(
  'post_type' => 'post',
  'category_name' => 'portfolio',
  'post_per_page' => '6'
);
$portfolio = new WP_Query($args);
$widths = array('3','4','5');
?>


  <div class="row grid">
<?php if( $portfolio->have_posts() ): while( $portfolio->have_posts() ): $portfolio->the_post();  ?>
    <!-- add sizing element for columnWidth -->
    <div class="grid-sizer col-sm-12 col-lg-3"></div>
    <!-- items use Bootstrap .col- classes -->
    <div class="grid-item col-sm-12 col-<?php echo 'md-' . array_shift($widths); ?> col-<?php echo 'lg-' . array_shift($widths); ?>">
      <!-- wrap item content in its own element -->
      <div class="grid-item-content">
        <a href="<?php the_permalink(); ?>">
        <img class="card-img-top w-100" src="<?php the_post_thumbnail_url('small'); ?>" id="case-studies">
        <div class="overlay-title">
          <h4 class="text-center" id="client-name"><?php the_title(); ?></h4>
        </div>
        </a>
      </div>
    </div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
  </div>

Answer 1

You are blending the Bootstrap framework and the Masonry.js library, but asking for help troubleshooting the resulting CSS on WordPress StackExchange.

You'll have better luck on Stack Overflow :) This isn't really a WordPress question.

I will say I do notice something odd about your code which is that whatever you're trying to do with the $widths array doesn't make sense to me. When you call array_shift, it gives you the first item of the array -- and the array is thereafter shortened. So the first time you call it you get 3, then 4, then 5, then nothing ever again, and depending on how many posts you are getting, you're calling it a lot.