Web Designer Wall

Snippets Network

Bootstrap 5 Social Network User Profile Card

A social profile card with cover photo, follower stats, friends, a post composer and a threaded feed with working follow and like buttons.

Bootstrap 5 No jQuery Oct 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1000px">
    <div class="wdw-card overflow-hidden">
      <div class="prof-cover" role="img" aria-label="Cover photo of mountains"></div>
      <div class="row g-0">
        <aside class="col-md-4 p-4 pt-0 border-end-md">
          <div class="prof-avatar mb-3"><img src="https://i.pravatar.cc/300?img=13" alt="John Doe" width="112" height="112" class="rounded-circle"></div>
          <h2 class="h4 wdw-heading mb-0">John Doe</h2>
          <p class="wdw-muted small mb-3">Product designer in Lisbon</p>
          <button type="button" class="btn btn-primary rounded-pill w-100 follow-btn" aria-pressed="false">Follow</button>
          <div class="row text-center g-2 my-4">
            <div class="col-6"><div class="rounded-4 bg-body-tertiary py-2"><strong class="d-block fs-4 text-primary" id="followers">682</strong><span class="small wdw-muted">Followers</span></div></div>
            <div class="col-6"><div class="rounded-4 bg-body-tertiary py-2"><strong class="d-block fs-4 text-primary">341</strong><span class="small wdw-muted">Following</span></div></div>
          </div>
          <h3 class="wdw-eyebrow mb-2">Friends</h3>
          <div class="d-flex flex-wrap gap-2">
            <img src="https://i.pravatar.cc/80?img=11" class="rounded-circle prof-friend" width="40" height="40" alt="Friend 1">
            <img src="https://i.pravatar.cc/80?img=12" class="rounded-circle prof-friend" width="40" height="40" alt="Friend 2">
            <img src="https://i.pravatar.cc/80?img=14" class="rounded-circle prof-friend" width="40" height="40" alt="Friend 3">
            <img src="https://i.pravatar.cc/80?img=15" class="rounded-circle prof-friend" width="40" height="40" alt="Friend 4">
            <img src="https://i.pravatar.cc/80?img=16" class="rounded-circle prof-friend" width="40" height="40" alt="Friend 5">
            <img src="https://i.pravatar.cc/80?img=17" class="rounded-circle prof-friend" width="40" height="40" alt="Friend 6">
          </div>
        </aside>
        <div class="col-md-8 p-4">
          <form id="postForm" class="mb-4">
            <label for="postText" class="visually-hidden">Share an update</label>
            <textarea id="postText" class="form-control bg-body-tertiary border-0 mb-2" rows="2" placeholder="Share an update..." style="height:auto;min-height:0"></textarea>
            <div class="text-end"><button type="submit" class="btn btn-primary btn-sm rounded-pill px-4" id="postBtn" disabled>Post</button></div>
          </form>
          <div id="feed" class="d-grid gap-3">
            <article class="d-flex gap-3">
              <img src="https://i.pravatar.cc/100?img=13" class="rounded-circle flex-none" width="44" height="44" alt="">
              <div class="flex-grow-1">
                <div class="d-flex align-items-baseline gap-2"><strong class="text-primary">John Doe</strong><span class="small wdw-muted">1 hour ago</span></div>
                <p class="mb-2">Finished the new onboarding flow today. Three screens fewer and noticeably calmer. Happy with how it turned out.</p>
                <div class="d-flex gap-2"><button type="button" class="btn btn-sm btn-light rounded-pill like-btn" aria-pressed="false">Like <span>4</span></button><button type="button" class="btn btn-sm btn-light rounded-pill">Comment (2)</button></div>
                <div class="d-flex gap-3 mt-3 ps-3 border-start">
                  <img src="https://i.pravatar.cc/100?img=11" class="rounded-circle" width="36" height="36" alt="">
                  <div><div class="d-flex align-items-baseline gap-2"><strong class="text-primary small">Mia Chen</strong><span class="small wdw-muted">45 mins ago</span></div><p class="small mb-0">Love the new spacing. Send over the file when you can.</p></div>
                </div>
              </div>
            </article>
            <hr class="my-1">
            <article class="d-flex gap-3">
              <img src="https://i.pravatar.cc/100?img=15" class="rounded-circle flex-none" width="44" height="44" alt="">
              <div class="flex-grow-1">
                <div class="d-flex align-items-baseline gap-2"><strong class="text-primary">Sam Ortiz</strong><span class="small wdw-muted">Yesterday</span></div>
                <p class="mb-2">Coffee on Friday? The new place near the river finally opened.</p>
                <div class="d-flex gap-2"><button type="button" class="btn btn-sm btn-light rounded-pill like-btn" aria-pressed="false">Like <span>1</span></button><button type="button" class="btn btn-sm btn-light rounded-pill">Comment (0)</button></div>
              </div>
            </article>
          </div>
        </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 network snippets