Web Designer Wall

Snippets Animation

Bootstrap 5 Social Post Image Gallery with Lightbox

A social post with a mosaic photo grid that opens a full-size viewer with previous and next controls, plus like and comment actions.

Bootstrap 5 No jQuery Aug 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width:640px">
    <article class="wdw-card p-3 p-md-4">
      <header class="d-flex align-items-center gap-3 mb-3">
        <img src="https://i.pravatar.cc/96?img=12" width="48" height="48" class="rounded-circle" alt="Avery Collins">
        <div class="lh-sm"><strong class="d-block">Avery Collins</strong><span class="small wdw-muted">12 hours ago · Public</span></div>
      </header>
      <p class="mb-3">What a weekend. Thank you to everyone who came out for the <a href="#" class="fw-semibold link-underline-opacity-0">#SummerSessions</a> tour. Here are my favourite shots.</p>
      <div class="gal mb-3">
        <button type="button" class="gal-item gal-item--lead" data-index="0" aria-label="Open photo 1 of 7: Crowd at an outdoor festival"><img src="https://images.unsplash.com/photo-1429962714451-bb934ecdc4ec?w=700&q=80" alt="Crowd at an outdoor festival" loading="lazy"></button>
        <button type="button" class="gal-item" data-index="1" aria-label="Open photo 2 of 7: Guitarist on stage"><img src="https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=700&q=80" alt="Guitarist on stage" loading="lazy"></button>
        <button type="button" class="gal-item" data-index="2" aria-label="Open photo 3 of 7: Concert lights over the crowd"><img src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=700&q=80" alt="Concert lights over the crowd" loading="lazy"></button>
        <button type="button" class="gal-item" data-index="3" aria-label="Open photo 4 of 7: Band performing at night"><img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=700&q=80" alt="Band performing at night" loading="lazy"></button>
        <button type="button" class="gal-item" data-index="4" aria-label="Open photo 5 of 7: Drummer behind a kit"><img src="https://images.unsplash.com/photo-1498038432885-c6f3f1b912ee?w=700&q=80" alt="Drummer behind a kit" loading="lazy"><span class="gal-more">+2</span></button>
      </div>
      <div class="d-flex gap-2 pb-3 mb-3 border-bottom">
        <button type="button" class="btn btn-sm btn-outline-primary rounded-pill like-btn" aria-pressed="false"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg><span>Like</span> <span class="like-count">248</span></button>
        <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill">Comment</button>
        <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill ms-auto">Share</button>
      </div>
      <form class="d-flex align-items-center gap-2" onsubmit="return false">
        <img src="https://i.pravatar.cc/72?img=5" width="36" height="36" class="rounded-circle" alt="">
        <label class="visually-hidden" for="gal-comment">Write a comment</label>
        <input id="gal-comment" type="text" class="form-control rounded-pill bg-body-tertiary border-0" placeholder="Write a comment...">
        <button class="btn btn-primary rounded-pill px-3">Post</button>
      </form>
    </article>
  </div>
  <div class="modal fade" id="galModal" tabindex="-1" aria-label="Photo viewer" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content bg-transparent border-0">
        <div class="position-relative">
          <img id="galModalImg" class="img-fluid rounded-4 w-100" src="https://images.unsplash.com/photo-1429962714451-bb934ecdc4ec?w=1200&q=80" alt="Crowd at an outdoor festival">
          <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
          <button type="button" class="gal-nav gal-prev" aria-label="Previous photo">‹</button>
          <button type="button" class="gal-nav gal-next" aria-label="Next photo">›</button>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More animation snippets