Bootstrap Profile Card with Follow Toggle — Free Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsprofile-card">
    <div class="bsprofile-cover"></div>
    <div class="card-body text-center">
      <div class="bsprofile-avatar mx-auto">DR</div>
      <h5 class="card-title mb-0">Dana Reyes</h5>
      <p class="text-muted small mb-3">Head of Product · Fenwick</p>
      <div class="d-flex justify-content-center gap-4 mb-3">
        <div><strong id="bsprofileFollowers">2,481</strong><div class="text-muted small">Followers</div></div>
        <div><strong>312</strong><div class="text-muted small">Following</div></div>
        <div><strong>48</strong><div class="text-muted small">Posts</div></div>
      </div>
      <button class="btn w-100 fw-bold bsprofile-follow" id="bsprofileBtn" data-following="false">Follow</button>
    </div>
  </div>
</div>

.bsprofile-card { width: 300px; border: 1px solid #eceef1; border-radius: 16px; overflow: hidden; }
.bsprofile-cover { height: 80px; background: linear-gradient(135deg, #6366f1, #ec4899); }
.bsprofile-avatar {
  width: 76px; height: 76px; margin-top: -46px;
  border-radius: 50%; border: 4px solid #fff;
  background: #111827; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px;
}
.bsprofile-follow { transition: background .15s, color .15s, border-color .15s; }
.bsprofile-follow[data-following="false"] { background: #111827; border-color: #111827; color: #fff; }
.bsprofile-follow[data-following="true"] { background: #fff; border: 1.5px solid #d1d5db; color: #111827; }
.bsprofile-follow[data-following="true"]:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.bsprofile-follow[data-following="true"]:hover::after { content: " (Unfollow)"; }
.bsprofile-follow[data-following="true"] .bsprofile-label-default { display: inline; }
.bsprofile-follow[data-following="true"]:hover .bsprofile-label-default { display: none; }

const btn = document.getElementById('bsprofileBtn');
const followersEl = document.getElementById('bsprofileFollowers');
const BASE = 2481;

btn.addEventListener('click', () => {
  const following = btn.dataset.following === 'true';
  const next = !following;
  btn.dataset.following = String(next);
  btn.textContent = next ? 'Following' : 'Follow';
  followersEl.textContent = (next ? BASE + 1 : BASE).toLocaleString();
});