<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="card-columns masonry-like"> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/79/thumb_78284_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/79/thumb_78521_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <div class="card-body bg-secondary text-white"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/79/thumb_78389_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/79/thumb_78221_projects_home.jpeg" alt="Card image"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/79/thumb_78137_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <div class="card-body bg-secondary text-white"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/79/thumb_78116_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/78/thumb_77866_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/77/thumb_76911_projects_home.jpeg" alt="Card image"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76928_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76769_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76915_projects_home.jpeg" alt="Card image"> </div> <div class="card"> <div class="card-body bg-secondary text-white"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/72/thumb_71237_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76901_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/77/thumb_76071_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/72/thumb_71758_projects_home.jpeg" alt="Card image"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76928_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76769_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76915_projects_home.jpeg" alt="Card image"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76928_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <div class="card-body bg-secondary text-white"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76966_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/70/thumb_69737_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/72/thumb_71608_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76915_projects_home.jpeg" alt="Card image"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76928_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <div class="card-body bg-secondary text-white"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/71/thumb_70076_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76915_projects_home.jpeg" alt="Card image"> </div> <div class="card"> <div class="card-body bg-secondary text-white"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76966_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76901_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76769_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/72/thumb_71218_projects_home.jpeg" alt="Card image"> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/72/thumb_71674_projects_home.jpeg" alt="Card image cap"> </div> <div class="card"> <div class="card-body bg-secondary text-white"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top border-0 rounded" src="https://d18lzomh2kdn9i.cloudfront.net/projects/0001/77/thumb_76966_projects_home.jpeg" alt="Card image cap"> </div> </div> </div>

.masonry-like { -webkit-column-count: 4; -moz-column-count:4; -ms-column-count: 4; column-count: 4; -webkit-column-gap: 1em; -moz-column-gap: 1em; -ms-column-gap: 1em; column-gap: 1em; font-size: .85em; padding: 0; } .masonry-like.card { -webkit-transition:1s ease all; -moz-transition:1s ease all; -o-transition:1s ease all; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-shadow: 2px 2px 4px 0 #ccc; } .masonry-like.card img { max-width:100%; height: auto; } @media (min-width: 1440px) { .masonry-like { -moz-column-count: 7; -webkit-column-count: 7; -ms-column-count: 7; column-count: 7; } } @media (min-width: 1281px) and (max-width: 1439px) { .masonry-like { -moz-column-count: 5; -webkit-column-count: 5; -ms-column-count: 5; column-count: 5; } } @media (min-width: 1025px) and (max-width: 1280px) { .masonry-like { -moz-column-count: 5; -webkit-column-count: 5; -ms-column-count: 5; column-count: 5; } } @media (min-width: 768px) and (max-width: 1024px) { .masonry-like { -moz-column-count: 3; -webkit-column-count: 3; -ms-column-count: 3; column-count: 3; } } @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .masonry-like { -moz-column-count: 3; -webkit-column-count: 3; -ms-column-count: 3; column-count: 3; } } @media (min-width: 481px) and (max-width: 767px) { .masonry-like { -moz-column-count: 2; -webkit-column-count: 2; -ms-column-count: 2; column-count: 2; } } @media (min-width: 320px) and (max-width: 480px) { .masonry-like { -moz-column-count: 1; -webkit-column-count: 1; -ms-column-count: 1; column-count: 1; } }