Bootstrap Masonry Image Gallery — Free HTML CSS JS Snippet

<div class="container py-5">
  <div class="btn-group mb-4" role="group" id="bsmgFilter">
    <button type="button" class="btn btn-outline-dark active" data-cat="all">All</button>
    <button type="button" class="btn btn-outline-dark" data-cat="nature">Nature</button>
    <button type="button" class="btn btn-outline-dark" data-cat="city">City</button>
    <button type="button" class="btn btn-outline-dark" data-cat="people">People</button>
  </div>

  <div class="bsmg-masonry" id="bsmgGrid">
    <img src="https://picsum.photos/id/1015/500/650" data-cat="nature" class="bsmg-img" alt="Mountain river">
    <img src="https://picsum.photos/id/1011/500/400" data-cat="people" class="bsmg-img" alt="Portrait">
    <img src="https://picsum.photos/id/1016/500/750" data-cat="city" class="bsmg-img" alt="City skyline">
    <img src="https://picsum.photos/id/1025/500/500" data-cat="people" class="bsmg-img" alt="Dog portrait">
    <img src="https://picsum.photos/id/1043/500/620" data-cat="nature" class="bsmg-img" alt="Field">
    <img src="https://picsum.photos/id/1031/500/450" data-cat="city" class="bsmg-img" alt="Street">
    <img src="https://picsum.photos/id/1035/500/700" data-cat="nature" class="bsmg-img" alt="Forest">
    <img src="https://picsum.photos/id/1027/500/500" data-cat="people" class="bsmg-img" alt="Crowd">
    <img src="https://picsum.photos/id/1044/500/580" data-cat="city" class="bsmg-img" alt="Bridge">
  </div>
</div>

<div class="modal fade" id="bsmgModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content bg-dark">
      <div class="modal-body p-0 text-center position-relative">
        <img id="bsmgModalImg" src="" class="img-fluid w-100" alt="Enlarged view">
        <button class="btn btn-light bsmg-nav bsmg-prev" id="bsmgPrev">&laquo;</button>
        <button class="btn btn-light bsmg-nav bsmg-next" id="bsmgNext">&raquo;</button>
        <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-2" data-bs-dismiss="modal"></button>
      </div>
    </div>
  </div>
</div>

.bsmg-masonry { column-count: 3; column-gap: 0.75rem; }
.bsmg-img { width: 100%; display: block; margin-bottom: 0.75rem; border-radius: 8px; cursor: pointer; break-inside: avoid; }
.bsmg-img.bsmg-hidden { display: none; }
@media (max-width: 768px) { .bsmg-masonry { column-count: 2; } }
@media (max-width: 480px) { .bsmg-masonry { column-count: 1; } }
.bsmg-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.85;
}
.bsmg-prev { left: 12px; }
.bsmg-next { right: 12px; }

const filterButtons = Array.from(document.querySelectorAll('#bsmgFilter button'));
const allImages = Array.from(document.querySelectorAll('.bsmg-img'));
let currentSet = allImages;
let currentIndex = 0;

const modalEl = document.getElementById('bsmgModal');
const modal = new bootstrap.Modal(modalEl);
const modalImg = document.getElementById('bsmgModalImg');

function visibleImages() {
  return allImages.filter(img => !img.classList.contains('bsmg-hidden'));
}

function applyFilter(cat) {
  allImages.forEach(img => {
    const matches = cat === 'all' || img.dataset.cat === cat;
    img.classList.toggle('bsmg-hidden', !matches);
  });
}

filterButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    filterButtons.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    applyFilter(btn.dataset.cat);
  });
});

function openModal(img) {
  // The Prev/Next set is always recomputed from whatever is currently
  // visible, so cycling only ever moves within the active filtered set.
  currentSet = visibleImages();
  currentIndex = currentSet.indexOf(img);
  modalImg.src = img.src;
  modal.show();
}

function showAt(index) {
  const len = currentSet.length;
  currentIndex = (index + len) % len;
  modalImg.src = currentSet[currentIndex].src;
}

allImages.forEach(img => {
  img.addEventListener('click', () => openModal(img));
});

document.getElementById('bsmgPrev').addEventListener('click', () => showAt(currentIndex - 1));
document.getElementById('bsmgNext').addEventListener('click', () => showAt(currentIndex + 1));

modalEl.addEventListener('keydown', e => {
  if (e.key === 'ArrowLeft') showAt(currentIndex - 1);
  if (e.key === 'ArrowRight') showAt(currentIndex + 1);
});