Web Designer Wall

Snippets Collapsible

Bootstrap 5 Post Card with Like, Comment and Share

A social post card with a photo, reaction summary and like, comment and share actions; comments expand beneath it, new comments can be posted and the link can be copied.

Bootstrap 5 No jQuery May 2020 2.5K views 

<section class="wdw-stage">
  <div class="container" style="max-width:680px">
    <article class="wdw-card p-4">
      <header class="d-flex align-items-center gap-3 mb-3">
        <img src="https://i.pravatar.cc/100?img=47" width="48" height="48" class="rounded-circle" alt="Marry Andrews">
        <div class="lh-sm"><strong class="text-body-emphasis d-block">Marry Andrews</strong><small class="wdw-muted">Shared publicly · Jan 2026</small></div>
      </header>
      <p class="mb-4">Finished the new design system audit today. Fewer tokens, clearer names, and every component finally has a dark mode that works. Happy to share the checklist if it helps.</p>
      <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1200&q=70" class="img-fluid rounded-4 w-100 mb-3 wdw-photo" width="1200" height="520" alt="Team reviewing design work together around a table">
      <div class="d-flex justify-content-between align-items-center small wdw-muted mb-2">
        <span class="d-flex align-items-center gap-2"><span class="d-flex wdw-stack" aria-hidden="true"><img src="https://i.pravatar.cc/60?img=12" alt=""><img src="https://i.pravatar.cc/60?img=32" alt=""><img src="https://i.pravatar.cc/60?img=5" alt=""></span><span id="likeCount">24 likes</span></span>
        <span id="cmtCount">2 comments</span>
      </div>
      <div class="d-flex gap-2 border-top pt-2">
        <button class="btn flex-fill rounded-pill wdw-act" type="button" id="likeBtn" aria-pressed="false">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Like</button>
        <button class="btn flex-fill rounded-pill wdw-act" type="button" data-bs-toggle="collapse" data-bs-target="#cmtBox" aria-expanded="false" aria-controls="cmtBox">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>Comment</button>
        <button class="btn flex-fill rounded-pill wdw-act" type="button" data-bs-toggle="collapse" data-bs-target="#shareBox" aria-expanded="false" aria-controls="shareBox">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></svg>Share</button>
      </div>
      <div id="cmtParent">
        <div id="cmtBox" class="collapse" data-bs-parent="#cmtParent">
          <ul class="list-unstyled d-grid gap-3 pt-3 mb-3" id="cmtList">
            <li class="d-flex gap-2"><img src="https://i.pravatar.cc/80?img=12" width="36" height="36" class="rounded-circle" alt=""><div class="bg-body-tertiary rounded-4 px-3 py-2"><strong class="small d-block">Tom Reyes</strong><span class="small">Yes please, send it over!</span></div></li>
            <li class="d-flex gap-2"><img src="https://i.pravatar.cc/80?img=32" width="36" height="36" class="rounded-circle" alt=""><div class="bg-body-tertiary rounded-4 px-3 py-2"><strong class="small d-block">Lena Park</strong><span class="small">Dark mode on every component is the dream.</span></div></li>
          </ul>
          <form id="cmtForm" class="d-flex gap-2">
            <label class="visually-hidden" for="cmtInput">Write a comment</label>
            <input id="cmtInput" class="form-control rounded-pill" placeholder="Write a comment…" required>
            <button class="btn btn-primary rounded-pill px-4" type="submit">Post</button>
          </form>
        </div>
        <div id="shareBox" class="collapse" data-bs-parent="#cmtParent"><div class="d-flex flex-wrap gap-2 pt-3"><button class="btn btn-outline-primary btn-sm rounded-pill" type="button" data-copy>Copy link</button><button class="btn btn-outline-secondary btn-sm rounded-pill" type="button" data-toast="Sent in a message">Send in message</button><button class="btn btn-outline-secondary btn-sm rounded-pill" type="button" data-toast="Shared to your feed">Share to feed</button></div></div>
      </div>
    </article>
    <div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
      <div id="shareToast" class="toast align-items-center text-bg-dark border-0" role="status" aria-live="polite" aria-atomic="true">
        <div class="d-flex"><div class="toast-body" id="toastMsg">Done</div><button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></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 collapsible snippets