Web Designer Wall

Snippets Feed

Bootstrap 5 Social Media Feed Post with Comments

A social feed post with author, photo, like and share actions, a comment thread and an input that adds new comments.

Bootstrap 5 No jQuery Aug 2020 2.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 680px">
    <article class="wdw-card overflow-hidden">
      <header class="d-flex align-items-center gap-3 p-3 px-4">
        <img src="https://i.pravatar.cc/96?img=12" alt="" width="44" height="44" class="rounded-circle">
        <div class="me-auto lh-sm">
          <a href="#" class="fw-bold text-body-emphasis text-decoration-none">Henry German</a>
          <div class="small wdw-muted">Public · 2h</div>
        </div>
        <div class="dropdown">
          <button class="btn btn-sm bg-body-secondary rounded-circle p-0 sf-round" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Post options">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/></svg>
          </button>
          <ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item" href="#">Save post</a></li><li><a class="dropdown-item" href="#">Copy link</a></li><li><a class="dropdown-item text-danger" href="#">Report</a></li></ul>
        </div>
      </header>
      <p class="px-4 mb-3">Look at the beach photo I clicked at golden hour.</p>
      <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1100&q=80" alt="Sunset over a calm beach with a glowing sky" class="w-100 h-auto object-fit-cover sf-photo">
      <div class="d-flex align-items-center gap-2 px-4 pt-3 small wdw-muted">
        <span class="d-flex sf-stack" aria-hidden="true">
          <img src="https://i.pravatar.cc/48?img=47" alt="" width="24" height="24" class="rounded-circle">
          <img src="https://i.pravatar.cc/48?img=15" alt="" width="24" height="24" class="rounded-circle">
          <img src="https://i.pravatar.cc/48?img=32" alt="" width="24" height="24" class="rounded-circle">
        </span>
        <span><span id="sfLikes">127</span> likes</span>
        <span class="ms-auto"><a href="#" class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover" id="sfViewAll">View all <span id="sfCount">14</span> comments</a></span>
      </div>
      <div class="d-flex align-items-center gap-2 px-4 py-3 border-bottom">
        <div class="sf-like-wrap position-relative">
          <div class="sf-react bg-body wdw-card-sm d-flex gap-1 p-1 rounded-pill" role="group" aria-label="Reactions">
            <button type="button" class="btn btn-sm btn-light rounded-circle p-0 sf-emoji" data-react="Like" aria-label="React with Like">👍</button>
            <button type="button" class="btn btn-sm btn-light rounded-circle p-0 sf-emoji" data-react="Love" aria-label="React with Love">❤️</button>
            <button type="button" class="btn btn-sm btn-light rounded-circle p-0 sf-emoji" data-react="Wow" aria-label="React with Wow">😮</button>
          </div>
          <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill px-3" id="sfLike" 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 5.6a5.2 5.2 0 00-7.4 0L12 7l-1.4-1.4a5.2 5.2 0 10-7.4 7.4L12 21.8l8.8-8.8a5.2 5.2 0 000-7.4z"/></svg>
            <span>Like</span>
          </button>
        </div>
        <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill px-3">
          <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="M4 12v7a1 1 0 001 1h14a1 1 0 001-1v-3M16 6l-4-4-4 4M12 2v13"/></svg>
          Share
        </button>
      </div>
      <ul class="list-unstyled mb-0 px-4 pt-3 d-flex flex-column gap-3" id="sfComments" aria-live="polite">
        <li class="d-flex gap-3">
          <img src="https://i.pravatar.cc/80?img=47" alt="" width="36" height="36" class="rounded-circle flex-none">
          <div class="sf-bubble rounded-4 px-3 py-2">
            <div class="d-flex gap-2 align-items-baseline"><span class="fw-semibold small">Tina Domiaz</span><span class="small wdw-muted">1h</span></div>
            <div class="small">Wow, what lens did you use for this one?</div>
          </div>
        </li>
        <li class="d-flex gap-3">
          <img src="https://i.pravatar.cc/80?img=15" alt="" width="36" height="36" class="rounded-circle flex-none">
          <div class="sf-bubble rounded-4 px-3 py-2">
            <div class="d-flex gap-2 align-items-baseline"><span class="fw-semibold small">Smith Helm</span><span class="small wdw-muted">45m</span></div>
            <div class="small">The colours are unreal. Is this a long exposure?</div>
          </div>
        </li>
      </ul>
      <form class="d-flex align-items-center gap-3 p-4" id="sfForm" autocomplete="off">
        <img src="https://i.pravatar.cc/80?img=12" alt="" width="36" height="36" class="rounded-circle flex-none">
        <label for="sfInput" class="visually-hidden">Write a comment</label>
        <input type="text" id="sfInput" class="form-control rounded-pill" placeholder="Add a comment">
        <button type="submit" class="btn btn-primary rounded-pill px-3" aria-label="Post comment"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4z"/></svg><span class="d-none d-sm-inline">Post</span></button>
      </form>
    </article>
  </div>
</section>

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

Free to use in personal and commercial projects under the MIT license.

Related snippets

More feed snippets