Bootstrap 5 Profile Page with Overview and Edit Tabs
A profile page with an avatar card and completion checklist, Overview and Edit profile tabs for the activity feed and account form, and side panels for projects and activity.
<section class="wdw-stage">
<div class="container" style="max-width:1140px">
<div class="row g-4 align-items-start">
<aside class="col-lg-4 col-xl-3">
<div class="wdw-card overflow-hidden">
<div class="wdw-aurora profile-cover"></div>
<div class="px-4 pb-4 text-center">
<img class="profile-avatar rounded-circle border border-4" src="https://i.pravatar.cc/160?img=47" width="96" height="96" alt="Melisa Doe">
<h2 class="h5 fw-bold mt-3 mb-0">Melisa Doe</h2>
<p class="wdw-muted small mb-3">Chief Executive Officer</p>
<p class="small wdw-muted text-start mb-4">Building calm, useful software with a small team. Coffee, trail running and long documents.</p>
<div class="text-start">
<div class="d-flex justify-content-between small fw-semibold mb-1"><span>Profile completion</span><span data-completion-label>60%</span></div>
<div class="progress mb-3" style="height:.5rem" role="progressbar" aria-label="Profile completion" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-completion><div class="progress-bar rounded-pill" style="width:60%"></div></div>
<ul class="list-unstyled small mb-0 d-grid gap-2" data-checklist>
<li class="form-check"><input class="form-check-input" type="checkbox" id="c1" checked disabled><label class="form-check-label" for="c1">Update your birthday</label></li>
<li class="form-check"><input class="form-check-input" type="checkbox" id="c2" checked disabled><label class="form-check-label" for="c2">Update profile picture</label></li>
<li class="form-check"><input class="form-check-input" type="checkbox" id="c3" checked disabled><label class="form-check-label" for="c3">Verify your email</label></li>
<li class="form-check"><input class="form-check-input" type="checkbox" id="c4" disabled><label class="form-check-label" for="c4">Confirm your account</label></li>
<li class="form-check"><input class="form-check-input" type="checkbox" id="c5" disabled><label class="form-check-label" for="c5">Update your address</label></li>
</ul>
</div>
</div>
</div>
</aside>
<main class="col-lg-8 col-xl-6">
<div class="wdw-card p-3 p-md-4">
<ul class="nav nav-pills gap-1 mb-4" id="profile-tabs" role="tablist" aria-label="Profile sections">
<li class="nav-item" role="presentation"><button class="nav-link active rounded-pill" id="tab-overview" data-bs-toggle="pill" data-bs-target="#pane-overview" type="button" role="tab" aria-controls="pane-overview" aria-selected="true">Overview</button></li>
<li class="nav-item" role="presentation"><button class="nav-link rounded-pill" id="tab-edit" data-bs-toggle="pill" data-bs-target="#pane-edit" type="button" role="tab" aria-controls="pane-edit" aria-selected="false">Edit profile</button></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="pane-overview" role="tabpanel" aria-labelledby="tab-overview" tabindex="0">
<form class="composer mb-4" id="composer">
<label class="visually-hidden" for="post-text">Share an update</label>
<textarea class="form-control border-0 bg-transparent" id="post-text" rows="2" placeholder="What's on your mind?"></textarea>
<div class="d-flex justify-content-between align-items-center px-2 pb-2">
<span class="wdw-muted small">Press Post to share with your team</span>
<button class="btn btn-primary btn-sm rounded-pill px-3" type="submit">Post</button>
</div>
</form>
<div id="feed" class="d-grid gap-4">
<article class="d-flex gap-3">
<img class="rounded-circle flex-shrink-0" src="https://i.pravatar.cc/80?img=47" width="40" height="40" alt="">
<div class="flex-grow-1">
<div class="d-flex justify-content-between"><strong>Melisa Doe</strong><span class="wdw-muted small">12 minutes ago</span></div>
<p class="mb-2">Shipped the new onboarding flow today. Huge thanks to everyone who tested it over the weekend.</p>
<div class="d-flex gap-1 small fw-semibold">
<button type="button" class="btn btn-link btn-sm px-2 text-decoration-none act like" aria-pressed="false">Like <span>(12)</span></button>
<button type="button" class="btn btn-link btn-sm px-2 text-decoration-none act" data-reply>Reply</button>
</div>
<form class="reply-form d-none gap-2 mt-2" data-reply-form>
<label class="visually-hidden">Write a reply</label>
<input class="form-control form-control-sm" placeholder="Write a reply..." required>
<button class="btn btn-primary btn-sm rounded-pill px-3" type="submit">Send</button>
</form>
<div class="reply d-flex gap-3 mt-3 p-3 rounded-4">
<img class="rounded-circle flex-shrink-0" src="https://i.pravatar.cc/80?img=12" width="36" height="36" alt="">
<div>
<div class="d-flex gap-2 align-items-baseline"><strong class="small">Ioana Doe</strong><span class="wdw-muted small">4 minutes ago</span></div>
<p class="small mb-0">Great work, the empty states look lovely.</p>
</div>
</div>
</div>
</article>
<article class="d-flex gap-3">
<img class="rounded-circle flex-shrink-0" src="https://i.pravatar.cc/80?img=33" width="40" height="40" alt="">
<div class="flex-grow-1">
<div class="d-flex justify-content-between"><strong>Simon Carter</strong><span class="wdw-muted small">1 hour ago</span></div>
<p class="mb-2">Reminder: design review moves to Thursday at 10:00.</p>
<div class="d-flex gap-1 small fw-semibold">
<button type="button" class="btn btn-link btn-sm px-2 text-decoration-none act like" aria-pressed="false">Like <span>(3)</span></button>
<button type="button" class="btn btn-link btn-sm px-2 text-decoration-none act" data-reply>Reply</button>
</div>
<form class="reply-form d-none gap-2 mt-2" data-reply-form>
<label class="visually-hidden">Write a reply</label>
<input class="form-control form-control-sm" placeholder="Write a reply..." required>
<button class="btn btn-primary btn-sm rounded-pill px-3" type="submit">Send</button>
</form>
</div>
</article>
</div>
</div>
<div class="tab-pane" id="pane-edit" role="tabpanel" aria-labelledby="tab-edit" tabindex="0">
<form id="edit-form" class="row g-3" novalidate>
<div class="col-sm-6"><div class="form-floating"><input class="form-control" id="f-first" value="Melisa" placeholder="First name" required aria-describedby="f-first-err"><label for="f-first">First name</label><div class="invalid-feedback" id="f-first-err">First name is required.</div></div></div>
<div class="col-sm-6"><div class="form-floating"><input class="form-control" id="f-last" value="Doe" placeholder="Last name" required aria-describedby="f-last-err"><label for="f-last">Last name</label><div class="invalid-feedback" id="f-last-err">Last name is required.</div></div></div>
<div class="col-12"><div class="form-floating"><input class="form-control" id="f-title" value="Chief Executive Officer" placeholder="Job title"><label for="f-title">Job title</label></div></div>
<div class="col-12"><div class="form-floating"><input type="email" class="form-control" id="f-email" value="[email protected]" placeholder="Email" required aria-describedby="f-email-err"><label for="f-email">Email</label><div class="invalid-feedback" id="f-email-err">Enter a valid email address.</div></div></div>
<div class="col-12"><label class="form-label small fw-semibold" for="f-bio">Bio</label><textarea class="form-control" id="f-bio" rows="3">Building calm, useful software with a small team.</textarea></div>
<div class="col-12 d-flex gap-2 justify-content-end align-items-center">
<span class="small text-success-emphasis me-auto" role="status" data-saved></span>
<button type="button" class="btn btn-outline-secondary cancel-btn rounded-pill" id="cancel-edit">Cancel</button>
<button type="submit" class="btn btn-primary rounded-pill">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</main>
<aside class="col-12 col-xl-3">
<div class="wdw-card p-4 mb-4">
<h3 class="h6 fw-bold mb-3">Projects</h3>
<ul class="list-unstyled d-grid gap-3 mb-0">
<li class="d-flex gap-3"><span class="dot"></span><div><div class="fw-semibold">Epona template</div><div class="wdw-muted small">Landing page kit, 80% done</div></div></li>
<li class="d-flex gap-3"><span class="dot"></span><div><div class="fw-semibold">Atropos dashboard</div><div class="wdw-muted small">In design review</div></div></li>
<li class="d-flex gap-3"><span class="dot"></span><div><div class="fw-semibold">Isisone mobile</div><div class="wdw-muted small">Waiting on copy</div></div></li>
</ul>
</div>
<div class="wdw-card p-4">
<h3 class="h6 fw-bold mb-3">Activity</h3>
<ul class="list-unstyled d-grid gap-3 mb-0">
<li class="d-flex gap-3"><span class="date"><small>Jun</small>29</span><div class="small"><strong>Release notes drafted</strong><div class="wdw-muted">Version 2.4 changelog</div></div></li>
<li class="d-flex gap-3"><span class="date"><small>Jun</small>24</span><div class="small"><strong>Team offsite booked</strong><div class="wdw-muted">Lisbon, September</div></div></li>
</ul>
</div>
</aside>
</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 */
.profile-cover { height: 96px; }
.profile-avatar { position: relative; border-color: var(--bs-body-bg); margin-top: -48px; object-fit: cover; background: var(--bs-body-bg); }
.act { min-height: 44px; }
.composer { border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-tertiary-bg); }
.composer:focus-within { border-color: rgba(var(--bs-primary-rgb), .6); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.composer textarea { resize: none; min-height: 0; box-shadow: none !important; }
.reply { background: var(--bs-tertiary-bg); }
.reply-form.d-flex { display: flex !important; }
.like[aria-pressed="true"] { font-weight: 700; }
.dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--bs-primary); margin-top: .5rem; flex: none; }
.date { width: 2.75rem; height: 3rem; flex: none; border: 1px solid var(--bs-border-color); border-radius: .75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; line-height: 1.1; }
.date small { font-size: .6rem; text-transform: uppercase; color: var(--bs-primary); letter-spacing: .06em; }
.cancel-btn { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--bs-border-color); }
[data-checklist] .form-check-input:disabled { opacity: 1; }
[data-checklist] .form-check-input:disabled ~ .form-check-label { opacity: 1; }
[data-checklist] .form-check-input:not(:checked):disabled ~ .form-check-label { color: var(--bs-secondary-color); }
#profile-tabs .nav-link { transition: none; }
(function () {
var ACTIONS = '<div class="d-flex gap-1 small fw-semibold"><button type="button" class="btn btn-link btn-sm px-2 text-decoration-none act like" aria-pressed="false">Like <span>(0)</span></button><button type="button" class="btn btn-link btn-sm px-2 text-decoration-none act" data-reply>Reply</button></div><form class="reply-form d-none gap-2 mt-2" data-reply-form><label class="visually-hidden">Write a reply</label><input class="form-control form-control-sm" placeholder="Write a reply..." required><button class="btn btn-primary btn-sm rounded-pill px-3" type="submit">Send</button></form>';
function initComposer() {
var form = document.getElementById('composer');
var feed = document.getElementById('feed');
if (!form || !feed) return;
form.addEventListener('submit', function (e) {
e.preventDefault();
var ta = form.querySelector('textarea');
var text = ta.value.trim();
if (!text) { ta.focus(); return; }
var art = document.createElement('article');
art.className = 'd-flex gap-3';
art.innerHTML = '<img class="rounded-circle flex-shrink-0" src="https://i.pravatar.cc/80?img=47" width="40" height="40" alt=""><div class="flex-grow-1"><div class="d-flex justify-content-between"><strong>Melisa Doe</strong><span class="wdw-muted small">Just now</span></div><p class="mb-1"></p>' + ACTIONS + '</div>';
art.querySelector('p').textContent = text;
feed.prepend(art);
ta.value = '';
});
}
function initFeedActions() {
var feed = document.getElementById('feed');
if (!feed) return;
feed.addEventListener('click', function (e) {
var like = e.target.closest('.like');
if (like) {
var count = like.querySelector('span');
var n = parseInt(count.textContent.replace(/\D/g, ''), 10);
var on = like.getAttribute('aria-pressed') !== 'true';
like.setAttribute('aria-pressed', String(on));
count.textContent = '(' + (on ? n + 1 : n - 1) + ')';
like.firstChild.nodeValue = on ? 'Liked ' : 'Like ';
return;
}
var reply = e.target.closest('[data-reply]');
if (reply) {
var f = reply.closest('.flex-grow-1').querySelector('[data-reply-form]');
f.classList.remove('d-none'); f.classList.add('d-flex');
f.querySelector('input').focus();
}
});
feed.addEventListener('submit', function (e) {
var f = e.target.closest('[data-reply-form]');
if (!f) return;
e.preventDefault();
var input = f.querySelector('input');
var text = input.value.trim();
if (!text) return;
var r = document.createElement('div');
r.className = 'reply d-flex gap-3 mt-3 p-3 rounded-4';
r.innerHTML = '<img class="rounded-circle flex-shrink-0" src="https://i.pravatar.cc/80?img=47" width="36" height="36" alt=""><div><div class="d-flex gap-2 align-items-baseline"><strong class="small">Melisa Doe</strong><span class="wdw-muted small">Just now</span></div><p class="small mb-0"></p></div>';
r.querySelector('p').textContent = text;
f.insertAdjacentElement('afterend', r);
input.value = '';
f.classList.add('d-none'); f.classList.remove('d-flex');
});
}
function initCompletion() {
var list = document.querySelector('[data-checklist]');
var bar = document.querySelector('[data-completion]');
var label = document.querySelector('[data-completion-label]');
if (!list || !bar || !label) return;
var boxes = list.querySelectorAll('input[type=checkbox]');
var done = list.querySelectorAll('input:checked').length;
var pct = Math.round(done / boxes.length * 100);
label.textContent = pct + '%';
bar.setAttribute('aria-valuenow', String(pct));
bar.firstElementChild.style.width = pct + '%';
}
function initEditForm() {
var form = document.getElementById('edit-form');
if (!form) return;
var saved = form.querySelector('[data-saved]');
var back = function () { bootstrap.Tab.getOrCreateInstance(document.getElementById('tab-overview')).show(); };
form.addEventListener('submit', function (e) {
e.preventDefault();
form.classList.add('was-validated');
if (!form.checkValidity()) return;
saved.textContent = 'Profile saved';
setTimeout(function () { saved.textContent = ''; }, 2500);
});
document.getElementById('cancel-edit').addEventListener('click', back);
}
initComposer();
initFeedActions();
initCompletion();
initEditForm();
})();
Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.
