Bootstrap 5 User Profile Layouts (Cover, Sidebar, Card, Edit)
A set of four modern user profile layouts: a cover-photo header with tabs, a sidebar profile with post composer, a compact photo card with stats, and an editable details form.
<section class="up-section wdw-stage">
<div class="container up-wrap">
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4">
<div>
<span class="wdw-eyebrow">Profiles</span>
<h2 class="h3 wdw-heading mb-1">User profile layouts</h2>
<p class="text-body-secondary mb-0">Four ways to present a member profile.</p>
</div>
<div class="nav nav-pills up-switch bg-body rounded-pill p-1 wdw-card-sm" role="tablist" aria-label="Profile style">
<button class="nav-link rounded-pill active" data-bs-toggle="pill" data-bs-target="#up-s1" role="tab" aria-selected="true">Cover</button>
<button class="nav-link rounded-pill" data-bs-toggle="pill" data-bs-target="#up-s2" role="tab" aria-selected="false">Sidebar</button>
<button class="nav-link rounded-pill" data-bs-toggle="pill" data-bs-target="#up-s3" role="tab" aria-selected="false">Card</button>
<button class="nav-link rounded-pill" data-bs-toggle="pill" data-bs-target="#up-s4" role="tab" aria-selected="false">Edit</button>
</div>
</div>
<div class="tab-content">
<!-- Style 1: cover -->
<div class="tab-pane fade show active" id="up-s1" role="tabpanel">
<article class="card wdw-card overflow-hidden">
<div class="up-cover wdw-aurora"></div>
<div class="px-4 px-md-5 pb-4">
<div class="d-flex flex-wrap align-items-end gap-3 up-lift">
<img class="up-avatar rounded-circle" src="https://i.pravatar.cc/200?img=47" width="112" height="112" alt="Camila Smith">
<div class="flex-grow-1 pb-1">
<h3 class="h4 fw-bold mb-0">Camila Smith</h3>
<p class="text-body-secondary mb-0">UI Designer · Sydney, Australia</p>
</div>
<div class="d-flex gap-2 pb-1">
<button type="button" class="btn btn-outline-secondary text-body rounded-pill px-3">Message</button>
<button type="button" class="btn btn-primary rounded-pill px-3">Follow</button>
</div>
</div>
<ul class="nav nav-underline mt-4 border-bottom" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#up-about" role="tab">About</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#up-work" role="tab">Projects</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#up-act" role="tab">Activity <span class="badge text-bg-primary rounded-pill ms-1">9</span></button></li>
</ul>
<div class="tab-content pt-4">
<div class="tab-pane fade show active" id="up-about" role="tabpanel">
<div class="row g-4">
<div class="col-lg-7">
<p class="text-body-secondary">Product designer focused on calm, accessible interfaces. Currently shaping design systems for fintech teams and mentoring junior designers.</p>
<dl class="row up-dl mb-0">
<dt class="col-5 col-sm-4">Occupation</dt><dd class="col-7 col-sm-8">UI Designer</dd>
<dt class="col-5 col-sm-4">Birthday</dt><dd class="col-7 col-sm-8">13 July 1983</dd>
<dt class="col-5 col-sm-4">Country</dt><dd class="col-7 col-sm-8">Australia</dd>
<dt class="col-5 col-sm-4">Email</dt><dd class="col-7 col-sm-8">[email protected]</dd>
<dt class="col-5 col-sm-4">Mobile</dt><dd class="col-7 col-sm-8">(12) 03 4567 890</dd>
</dl>
</div>
<div class="col-lg-5">
<div class="row g-0 text-center rounded-4 border py-3">
<div class="col-4"><div class="up-num">1.3k</div><small class="text-body-secondary">Followers</small></div>
<div class="col-4 border-start border-end"><div class="up-num">219</div><small class="text-body-secondary">Following</small></div>
<div class="col-4"><div class="up-num">92</div><small class="text-body-secondary">Stories</small></div>
</div>
<div class="mt-4 d-flex flex-wrap gap-2">
<span class="up-chip rounded-pill">Figma</span>
<span class="up-chip rounded-pill">Design systems</span>
<span class="up-chip rounded-pill">Prototyping</span>
<span class="up-chip rounded-pill">Research</span>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="up-work" role="tabpanel">
<div class="row g-3">
<div class="col-md-6"><div class="p-3 border rounded-4"><div class="d-flex justify-content-between"><strong>Envato Website</strong><span class="text-body-secondary small">35%</span></div><div class="progress mt-2" style="height:6px"><div class="progress-bar" style="width:35%"></div></div></div></div>
<div class="col-md-6"><div class="p-3 border rounded-4"><div class="d-flex justify-content-between"><strong>CMS Dashboard</strong><span class="text-body-secondary small">63%</span></div><div class="progress mt-2" style="height:6px"><div class="progress-bar" style="width:63%"></div></div></div></div>
<div class="col-md-6"><div class="p-3 border rounded-4"><div class="d-flex justify-content-between"><strong>Portfolio</strong><span class="text-body-secondary small">75%</span></div><div class="progress mt-2" style="height:6px"><div class="progress-bar" style="width:75%"></div></div></div></div>
<div class="col-md-6"><div class="p-3 border rounded-4"><div class="d-flex justify-content-between"><strong>Muse Template</strong><span class="text-body-secondary small">50%</span></div><div class="progress mt-2" style="height:6px"><div class="progress-bar" style="width:50%"></div></div></div></div>
</div>
</div>
<div class="tab-pane fade" id="up-act" role="tabpanel">
<ul class="list-group list-group-flush">
<li class="list-group-item px-0">Published <strong>Spring design kit</strong> · 2h ago</li>
<li class="list-group-item px-0">Commented on <strong>Onboarding flow v3</strong> · yesterday</li>
<li class="list-group-item px-0">Joined the <strong>Accessibility guild</strong> · 3 days ago</li>
</ul>
</div>
</div>
</div>
</article>
</div>
<!-- Style 2: sidebar -->
<div class="tab-pane fade" id="up-s2" role="tabpanel">
<div class="row g-4">
<div class="col-md-4">
<div class="card wdw-card h-100">
<div class="card-body text-center p-4">
<img class="rounded-circle mb-3 up-ring" src="https://i.pravatar.cc/200?img=47" width="104" height="104" alt="Camila Smith">
<h3 class="h5 fw-bold mb-0">Camila Smith</h3>
<p class="text-body-secondary small mb-3">[email protected]</p>
<div class="list-group list-group-flush text-start">
<a href="#" class="list-group-item list-group-item-action active rounded-3 border-0 mb-1" aria-current="true">Profile</a>
<a href="#" class="list-group-item list-group-item-action rounded-3 border-0 mb-1 d-flex justify-content-between align-items-center">Recent activity <span class="badge text-bg-primary rounded-pill">9</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-3 border-0">Edit profile</a>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card wdw-card mb-4">
<div class="card-body p-3">
<label for="up-post" class="visually-hidden">Post</label>
<textarea id="up-post" class="form-control border-0 bg-body-tertiary rounded-3" rows="2" placeholder="What's on your mind today?"></textarea>
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="d-flex gap-1">
<button type="button" class="btn bg-body-tertiary text-body rounded-circle up-ico" aria-label="Add photo"><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"><rect x="3" y="5" width="18" height="14" rx="3"/><circle cx="12" cy="12" r="3.5"/></svg></button>
<button type="button" class="btn bg-body-tertiary text-body rounded-circle up-ico" aria-label="Add location"><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="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.800 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg></button>
</div>
<button type="button" class="btn btn-primary rounded-pill px-4">Post</button>
</div>
</div>
</div>
<div class="card wdw-card">
<div class="card-body p-4">
<h3 class="h6 text-uppercase text-body-secondary fw-semibold mb-3">Bio</h3>
<dl class="row up-dl mb-0 gy-1">
<dt class="col-4 col-sm-3">First name</dt><dd class="col-8 col-sm-3">Camila</dd>
<dt class="col-4 col-sm-3">Last name</dt><dd class="col-8 col-sm-3">Smith</dd>
<dt class="col-4 col-sm-3">Country</dt><dd class="col-8 col-sm-3">Australia</dd>
<dt class="col-4 col-sm-3">Birthday</dt><dd class="col-8 col-sm-3">13 July 1983</dd>
<dt class="col-4 col-sm-3">Occupation</dt><dd class="col-8 col-sm-3">UI Designer</dd>
<dt class="col-4 col-sm-3">Phone</dt><dd class="col-8 col-sm-3">88 (02) 123456</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<!-- Style 3: card -->
<div class="tab-pane fade" id="up-s3" role="tabpanel">
<div class="card wdw-card overflow-hidden mx-auto up-card3">
<div class="position-relative">
<img class="up-photo" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=700&q=80&auto=format&fit=crop" alt="Jane Doe smiling outdoors">
<div class="up-scrim position-absolute bottom-0 start-0 end-0 p-4 text-white">
<h3 class="h4 fw-bold mb-0">Jane C. Doe</h3>
<p class="mb-0 small opacity-75">Designer & coffee lover</p>
</div>
</div>
<div class="card-body p-4 text-center">
<p class="text-body-secondary">“Where there is coffee, there is life. Loves to read, paint and sleep.”</p>
<div class="row g-0 text-center border rounded-4 py-3 mb-3">
<div class="col-4"><div class="h5 fw-bold mb-0">1,293</div><small class="text-body-secondary">Followers</small></div>
<div class="col-4 border-start border-end"><div class="h5 fw-bold mb-0">219</div><small class="text-body-secondary">Following</small></div>
<div class="col-4"><div class="h5 fw-bold mb-0">92</div><small class="text-body-secondary">Stories</small></div>
</div>
<button type="button" class="btn btn-primary rounded-pill w-100 py-2" data-up-follow aria-pressed="false">Follow</button>
</div>
</div>
</div>
<!-- Style 4: edit -->
<div class="tab-pane fade" id="up-s4" role="tabpanel">
<form class="card wdw-card" onsubmit="return false">
<div class="card-body p-4 p-md-5">
<div class="d-flex align-items-center gap-3 mb-4">
<img class="rounded-circle" src="https://i.pravatar.cc/120?img=12" width="64" height="64" alt="John Doe">
<div><h3 class="h5 fw-bold mb-0">Edit profile</h3><p class="text-body-secondary small mb-0">Update how others see you.</p></div>
</div>
<div class="row g-3">
<div class="col-md-6"><div class="form-floating"><input type="text" class="form-control" id="up-n" value="John Doe" placeholder="Name"><label for="up-n">Full name</label></div></div>
<div class="col-md-6"><div class="form-floating"><input type="text" class="form-control" id="up-r" value="Web & frontend developer" placeholder="Role"><label for="up-r">Role</label></div></div>
<div class="col-md-6"><div class="form-floating"><input type="tel" class="form-control" id="up-m" value="+1 (847) 367-8924" placeholder="Mobile"><label for="up-m">Mobile</label></div></div>
<div class="col-md-6"><div class="form-floating"><select class="form-select" id="up-c"><option selected>United States</option><option>Canada</option><option>Australia</option></select><label for="up-c">Country</label></div></div>
<div class="col-12"><div class="form-floating"><textarea class="form-control" id="up-a" placeholder="About" style="height:96px">I build fast, accessible interfaces.</textarea><label for="up-a">About me</label></div></div>
</div>
<div class="d-flex justify-content-end gap-2 mt-4">
<button type="reset" class="btn btn-outline-secondary text-body rounded-pill px-4">Cancel</button>
<button type="submit" class="btn btn-primary rounded-pill px-4">Save changes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
/* Web Designer Wall library style — shared base for every Bootstrap 5 snippet.
Indigo accent, Plus Jakarta Sans, soft cards, pill buttons. Works in light and dark. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
:root,
[data-bs-theme="light"] {
--wdw-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--bs-body-font-family: var(--wdw-font);
--bs-primary: #4f46e5;
--bs-primary-rgb: 79, 70, 229;
--bs-primary-text-emphasis: #3730a3;
--bs-primary-bg-subtle: #eef2ff;
--bs-primary-border-subtle: #c7d2fe;
--bs-link-color: #4f46e5;
--bs-link-color-rgb: 79, 70, 229;
--bs-link-hover-color: #4338ca;
--bs-link-hover-color-rgb: 67, 56, 202;
--bs-focus-ring-color: rgba(79, 70, 229, 0.25);
--bs-border-radius: 0.75rem;
--bs-border-radius-lg: 1rem;
--bs-border-radius-xl: 1.25rem;
--wdw-radius-card: 1.25rem;
--wdw-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 40px -16px rgba(16, 24, 40, 0.22);
--wdw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px -4px rgba(16, 24, 40, 0.12);
--wdw-stage: #f5f6fb;
}
[data-bs-theme="dark"] {
--bs-primary: #818cf8;
--bs-primary-rgb: 129, 140, 248;
--bs-primary-text-emphasis: #c7d2fe;
--bs-primary-bg-subtle: rgba(129, 140, 248, 0.14);
--bs-primary-border-subtle: rgba(129, 140, 248, 0.35);
--bs-link-color: #a5b4fc;
--bs-link-color-rgb: 165, 180, 252;
--bs-link-hover-color: #c7d2fe;
--bs-link-hover-color-rgb: 199, 210, 254;
--bs-focus-ring-color: rgba(129, 140, 248, 0.35);
--wdw-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
--wdw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
--wdw-stage: #0f1117;
}
body { font-family: var(--wdw-font); -webkit-font-smoothing: antialiased; }
/* Bootstrap compiles its blue into these components; point them at the accent. */
.btn-primary {
--bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca;
--bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3;
--bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0f1117; --bs-btn-hover-bg: #a5b4fc; --bs-btn-hover-border-color: #a5b4fc; --bs-btn-hover-color: #0f1117; --bs-btn-active-color: #0f1117; }
.btn-outline-primary {
--bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn { --bs-btn-font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { min-height: 36px; }
.form-control, .form-select { min-height: 44px; border-radius: .75rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), .6); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.nav { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-emphasis-color); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-color: var(--bs-body-color); --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); border-radius: .875rem; box-shadow: var(--wdw-shadow-sm); }
.accordion { --bs-accordion-active-bg: var(--bs-primary-bg-subtle); --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.badge { font-weight: 600; }
/* Library building blocks — use these instead of re-inventing them per snippet. */
.wdw-stage { min-height: 100vh; display: flex; align-items: center; background: var(--wdw-stage); padding-block: 3rem; }
.wdw-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: var(--wdw-radius-card); box-shadow: var(--wdw-shadow); }
.wdw-card-sm { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; box-shadow: var(--wdw-shadow-sm); }
.wdw-aurora { position: relative; color: #fff; background: radial-gradient(60% 55% at 100% 0, #818cf8 0, transparent 70%), radial-gradient(65% 60% at 0 100%, #ec4899 0, transparent 65%), #1e1b4b; }
.wdw-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-primary); }
.wdw-heading { font-weight: 800; letter-spacing: -.02em; color: var(--bs-emphasis-color); }
.wdw-muted { color: var(--bs-secondary-color); }
.wdw-icon { width: 2.75rem; height: 2.75rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: .875rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
/* Component */
.up-wrap{max-width:980px}
.up-switch .nav-link{color:var(--bs-secondary-color);padding:.5rem 1rem;min-height:44px}
.up-cover{height:170px}
.up-num{font-size:1.75rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--bs-emphasis-color)}
.up-chip{display:inline-block;font-size:.85rem;font-weight:500;padding:.4rem .9rem;border:1px solid var(--bs-border-color);background:var(--bs-secondary-bg);color:var(--bs-body-color)}
.up-lift{margin-top:-48px;position:relative;z-index:1}
.up-avatar{object-fit:cover;background:var(--bs-body-bg);border:4px solid var(--bs-body-bg)}
.up-ring{box-shadow:0 0 0 4px var(--bs-body-bg),0 0 0 6px var(--bs-primary)}
.up-dl dt{font-weight:500;color:var(--bs-secondary-color);padding:.35rem 0}
.up-dl dd{padding:.35rem 0;margin:0;color:var(--bs-emphasis-color)}
.up-ico{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.up-card3{max-width:380px}
.up-photo{display:block;width:100%;height:340px;object-fit:cover}
.up-scrim{background:linear-gradient(transparent,rgba(0,0,0,.7))}
.up-section .nav-underline .nav-link{min-height:44px}
@media (max-width:575.98px){.up-cover{height:110px}.up-photo{height:280px}}
.up-dl{--bs-gutter-x:0}.up-section .nav-underline{--bs-nav-link-color:var(--bs-secondary-color);--bs-nav-link-hover-color:var(--bs-emphasis-color)}
.up-section .btn-outline-secondary{--bs-btn-color:var(--bs-body-color);--bs-btn-border-color:var(--bs-border-color);--bs-btn-hover-bg:var(--bs-tertiary-bg);--bs-btn-hover-color:var(--bs-emphasis-color);--bs-btn-hover-border-color:var(--bs-border-color)}
.up-section.wdw-stage{padding-block:1.5rem}
.up-cover{height:120px;background:radial-gradient(45% 90% at 50% 50%,rgba(129,140,248,.85) 0,transparent 75%),radial-gradient(35% 80% at 25% 80%,rgba(236,72,153,.5) 0,transparent 70%),radial-gradient(35% 80% at 78% 20%,rgba(129,140,248,.45) 0,transparent 70%),#1e1b4b}
.up-lift{margin-top:-40px}
.up-section .tab-content.pt-4{padding-top:1rem!important}
.up-section .nav-underline{margin-top:1rem!important}
@media (max-width:575.98px){.up-cover{height:96px}}
function initFollowButton() {
const btn = document.querySelector('[data-up-follow]');
if (!btn) return;
btn.addEventListener('click', () => {
const on = btn.getAttribute('aria-pressed') !== 'true';
btn.setAttribute('aria-pressed', on);
btn.textContent = on ? 'Following' : 'Follow';
btn.classList.toggle('btn-primary', !on);
btn.classList.toggle('btn-outline-primary', on);
});
}
initFollowButton();
Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.
