Bootstrap

If You would like to implement only the masonry component of bootstrap

//CARD COLUMNS
.card-columns .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

HTML structure with WordPress loop

<?php
wp_reset_postdata();
  
$args = array(
    'post_type' => 'post_type',
    'posts_per_page' => -1
);
  
$the_query = new WP_Query( $args ); ?>
 
    <div class="card-columns">
        
        <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
     
           <div class="card">
                
                <!---->
               
            </div>
 
        <?php endwhile; endif; ?>
    </div>
 
<?php wp_reset_postdata(); ?>

<div id="slider-wrapper" class="container-fluid">
 
<div id="mySlider" class="carousel slide" data-ride="carousel"> 
   
   <ol class="carousel-indicators">
    <li data-target="#mySlider" data-slide-to="0" class="active"></li>
    <li data-target="#mySlider" data-slide-to="1"></li>
    <li data-target="#mySlider" data-slide-to="2"></li>
    <li data-target="#mySlider" data-slide-to="3"></li>
  </ol>
    
    <div class="carousel-inner" role="listbox">
 
      <!--LOOP ACTIVE ITEMS-->      
    
    <?php wp_reset_postdata();
 
     $the_query = new WP_Query(array(
                'post_type' => 'slider', 
                'posts_per_page' => 1 
                )); 
 
                                
    while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
       <div class="carousel-item active" style="background-image: url('<?php the_field('slide'); ?>');">
       <div class="carousel-caption">
          <div class="carousel-head">
               <h2><?php the_title(); ?></h2>
           </div>
           <p><?php the_field('caption_text'); ?></p>
           <?php echo do_shortcode('[cta]'); ?>
       </div>
         
    </div><!--item-active-->
    <?php endwhile; wp_reset_postdata(); ?>
     
<!--LOOP ITEMS-->    
      <?php  
       $the_query = new WP_Query(array(
                'post_type' => 'slider', 
                'posts_per_page' => 2, 
                'offset' => 1 
                )); 
 
                                
    while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
       <div class="carousel-item" style="background-image: url('<?php the_field('slide'); ?>');">
       <div class="carousel-caption">
          <div class="carousel-head">
               <h2><?php the_title(); ?></h2>
           </div>
           <p><?php the_field('caption_text'); ?></p>
           <?php echo do_shortcode('[cta]'); ?>
       </div>
    </div><!--item-active-->
    <?php endwhile; wp_reset_postdata(); ?>
          
       </div>  
  
   <div class="carousel-control-wrapper hidden">
   <a class="carousel-control-prev" data-target="#mySlider" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" data-target="#mySlider" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</div>  
</div>

<?php
$args = array(
           'post_type'      => 'posttype',
           'posts_per_page' => 20,
            'tax_query' => array(
               array(
                   'taxonomy' => 'taxonomy',
                   'field'    => 'slug',
                   'terms'    => 'terms',
               ),
           ),
       );                  
 
$query = new WP_Query( $args );  

$counter = 0;
$post_count = $the_query->post_count;
 ?>
 
     <?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>

        <?php 
             if ($counter == 0) {
              echo '<div class="row">';
            }
        ?>
                
                <!------------------------------------->
            
        <?php 
            $counter++; 
            if ( $counter % 4 == 0 || $post_count == $counter ) {
              echo '</div> <div class="row">';
            }
?>

       <?php endwhile; endif; ?>
   
<?php wp_reset_postdata(); ?>

// =========================================================================
// BOOTSTRAP CSS
// =========================================================================
function enqueue_bootstrap_styles(){ 
    wp_enqueue_style('bootstrap_css', '//stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css');
}
add_action( 'wp_enqueue_scripts', 'enqueue_bootstrap_styles' );
 
// =========================================================================
// BOOTSTRAP JAVASCRIPT
// =========================================================================
function enqueue_bootstrap_scripts() {  
    wp_enqueue_script( 'bootstrap_jquery', '//code.jquery.com/jquery-3.4.1.slim.min.js', array(), '3.3.1', true );
    wp_enqueue_script( 'bootstrap_popper', '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js', array(), '1.14.7', true );
    wp_enqueue_script( 'bootstrap_javascript', '//stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js', array(), '4.3.1', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_bootstrap_scripts' );

<?php

//TESTIMONIAL
function post_carousel_loop() { ?>

<div class="container">

<div id="myCarousel" class="carousel slide" data-ride="carousel">



<div class="carousel-inner" role="listbox">


<!--LOOP ACTIVE ITEMS-->

<?php wp_reset_postdata();

$the_query = new WP_Query(array(
'post_type' => 'testimonial',
'posts_per_page' => 1
));

while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="carousel-item active">
<div class="row">
<div class="col-md-12">
<h2 class="carousel-title">Our Patients Say</h2>
<?php the_excerpt(); ?>
<h4 class="author">
<?php the_title(); ?>
</h4>
</div>
</div><!--row-->
</div><!--item-active-->
<?php endwhile; wp_reset_postdata(); ?>

<!--LOOP ITEMS-->
<?php
$the_query = new WP_Query(array(
'post_type' => 'testimonial',
'posts_per_page' => 3,
'offset' => 1
));

while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="carousel-item">
<div class="row">
<div class="col-md-12">
<h2 class="carousel-title">Our Patients Say</h2>
<?php the_excerpt(); ?>
<h4 class="author">
<?php the_title(); ?>
</h4>
</div>
</div><!--row-->
</div><!--item-active-->
<?php endwhile; wp_reset_postdata(); ?>

</div>

<div class="carousel-control-wrapper">
<a class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-target="#myCarousel" role="button" data-slide="next">
<i class="fas fa-chevron-right"></i>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

<?php
}
add_shortcode('testimonial-carousel', 'post_carousel_loop');

?>