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(); ?>