Bootstrap 5 Email Inbox Layout
An email inbox layout with a folder and label sidebar, a bulk-action toolbar, and a message list with checkboxes, stars, labels, attachments and timestamps.
<section class="wdw-stage">
<div class="container" style="max-width: 1120px">
<div class="wdw-card overflow-hidden mb-shell">
<div class="row g-0">
<aside class="col-lg-3 p-3 p-lg-4 bg-body-tertiary mb-side">
<div class="d-flex align-items-center justify-content-between mb-3 mb-lg-4">
<h2 class="wdw-heading h4 mb-0">Mail</h2>
</div>
<button type="button" class="btn btn-primary rounded-pill w-100 mb-3"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg> Compose</button>
<ul class="list-unstyled mb-3 mb-lg-4 d-grid gap-1"><li><a href="#" class="mb-folder d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-decoration-none active" aria-current="page"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z"/></svg><span class="flex-grow-1">Inbox</span><span class="badge rounded-pill text-bg-primary mb-fbadge">8</span></a></li><li><a href="#" class="mb-folder d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-decoration-none"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3-6.2 3.3L7 14.2 2 9.3l6.9-1L12 2Z"/></svg><span class="flex-grow-1">Starred</span></a></li><li><a href="#" class="mb-folder d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-decoration-none"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/></svg><span class="flex-grow-1">Drafts</span><span class="badge rounded-pill text-bg-secondary mb-fbadge">20</span></a></li><li><a href="#" class="mb-folder d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-decoration-none"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg><span class="flex-grow-1">Sent</span></a></li><li><a href="#" class="mb-folder d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-decoration-none"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg><span class="flex-grow-1">Trash</span><span class="badge rounded-pill text-bg-secondary mb-fbadge">354</span></a></li></ul>
<div class="wdw-eyebrow mb-2 px-3 text-body-secondary d-none d-lg-block">Labels</div>
<ul class="list-unstyled mb-0 d-none d-lg-grid gap-1"><li><a href="#" class="mb-folder d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-decoration-none"><span class="text-primary"><svg width="10" height="10" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg></span><span>Web app</span></a></li><li><a href="#" class="mb-folder d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-decoration-none"><span class="text-warning"><svg width="10" height="10" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg></span><span>Project one</span></a></li><li><a href="#" class="mb-folder d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-decoration-none"><span class="text-info"><svg width="10" height="10" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg></span><span>Project two</span></a></li><li><a href="#" class="mb-folder d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-decoration-none"><span class="text-danger"><svg width="10" height="10" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg></span><span>Friends</span></a></li><li><a href="#" class="mb-folder d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-decoration-none"><span class="text-success"><svg width="10" height="10" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg></span><span>Family</span></a></li></ul>
</aside>
<div class="col-lg-9">
<div class="d-flex align-items-center flex-wrap gap-2 px-3 py-3 border-bottom mb-toolbar">
<div class="form-check mb-0 ms-1 me-2">
<input class="form-check-input" type="checkbox" id="mbAll" aria-label="Select all messages">
</div>
<div class="btn-group" role="group" aria-label="Message actions">
<button type="button" class="btn btn-sm btn-outline-secondary mb-act" data-act="archive" title="Archive" aria-label="Archive selected"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg></button>
<button type="button" class="btn btn-sm btn-outline-secondary mb-act" data-act="read" title="Mark as read" aria-label="Mark selected as read"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-10 5L2 7"/></svg></button>
<button type="button" class="btn btn-sm btn-outline-secondary mb-act" data-act="delete" title="Delete" aria-label="Delete selected"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
</div>
<div class="dropdown">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">More</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item mb-act" type="button" data-act="read-all">Mark all as read</button></li>
<li><button class="dropdown-item mb-act" type="button" data-act="unstar">Clear all stars</button></li>
<li><hr class="dropdown-divider"></li>
<li><button class="dropdown-item mb-act" type="button" data-act="restore">Restore demo messages</button></li>
</ul>
</div>
<span class="ms-auto small wdw-muted mb-summary" role="status" aria-live="polite"></span>
</div>
<ul class="list-unstyled mb-0 mb-list">
<li class="mb-row d-flex align-items-center gap-2 gap-md-3 px-3 py-3 mb-unread" data-id="0">
<input class="form-check-input mb-check mt-0 flex-none" type="checkbox" aria-label="Select message from Google Inc">
<button type="button" class="btn btn-link mb-star p-0 flex-none is-on" aria-pressed="true" aria-label="Star message from Google Inc"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3-6.2 3.3L7 14.2 2 9.3l6.9-1L12 2Z"/></svg></button>
<span class="mb-from text-truncate d-none d-sm-block flex-none">Google Inc</span>
<div class="mb-main flex-grow-1 min-w-0">
<div class="d-sm-none small mb-from">Google Inc</div>
<div class="text-truncate"><span class="mb-subject">Security alert for your account</span><span class="wdw-muted d-none d-lg-inline"> – We noticed a new sign-in to your Google account on a Mac device.</span></div>
</div>
<span class="mb-tag flex-none text-info" title="Project two"><svg width="8" height="8" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg><span class="visually-hidden">Project two</span></span>
<time class="small wdw-muted flex-none text-end mb-time">07:23 AM</time>
</li>
<li class="mb-row d-flex align-items-center gap-2 gap-md-3 px-3 py-3 mb-unread" data-id="1">
<input class="form-check-input mb-check mt-0 flex-none" type="checkbox" aria-label="Select message from John Doe">
<button type="button" class="btn btn-link mb-star p-0 flex-none" aria-pressed="false" aria-label="Star message from John Doe"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3-6.2 3.3L7 14.2 2 9.3l6.9-1L12 2Z"/></svg></button>
<span class="mb-from text-truncate d-none d-sm-block flex-none">John Doe</span>
<div class="mb-main flex-grow-1 min-w-0">
<div class="d-sm-none small mb-from">John Doe</div>
<div class="text-truncate"><span class="mb-subject">Hi Bro, how are you?</span><span class="wdw-muted d-none d-lg-inline"> – It has been a while. Are we still on for coffee on Friday?</span></div>
</div>
<span class="mb-tag flex-none text-success" title="Family"><svg width="8" height="8" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg><span class="visually-hidden">Family</span></span>
<span class="wdw-muted flex-none d-none d-sm-inline"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.4 11.1-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5"/></svg><span class="visually-hidden">Has attachment</span></span>
<time class="small wdw-muted flex-none text-end mb-time">07:03 AM</time>
</li>
<li class="mb-row d-flex align-items-center gap-2 gap-md-3 px-3 py-3" data-id="2">
<input class="form-check-input mb-check mt-0 flex-none" type="checkbox" aria-label="Select message from Manager">
<button type="button" class="btn btn-link mb-star p-0 flex-none is-on" aria-pressed="true" aria-label="Star message from Manager"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3-6.2 3.3L7 14.2 2 9.3l6.9-1L12 2Z"/></svg></button>
<span class="mb-from text-truncate d-none d-sm-block flex-none">Manager</span>
<div class="mb-main flex-grow-1 min-w-0">
<div class="d-sm-none small mb-from">Manager</div>
<div class="text-truncate"><span class="mb-subject">Quarterly roadmap review</span><span class="wdw-muted d-none d-lg-inline"> – Please review the attached slides before tomorrow's meeting.</span></div>
</div>
<span class="mb-tag flex-none text-warning" title="Project one"><svg width="8" height="8" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg><span class="visually-hidden">Project one</span></span>
<span class="wdw-muted flex-none d-none d-sm-inline"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.4 11.1-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5"/></svg><span class="visually-hidden">Has attachment</span></span>
<time class="small wdw-muted flex-none text-end mb-time">03:00 AM</time>
</li>
<li class="mb-row d-flex align-items-center gap-2 gap-md-3 px-3 py-3" data-id="3">
<input class="form-check-input mb-check mt-0 flex-none" type="checkbox" aria-label="Select message from Facebook">
<button type="button" class="btn btn-link mb-star p-0 flex-none" aria-pressed="false" aria-label="Star message from Facebook"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3-6.2 3.3L7 14.2 2 9.3l6.9-1L12 2Z"/></svg></button>
<span class="mb-from text-truncate d-none d-sm-block flex-none">Facebook</span>
<div class="mb-main flex-grow-1 min-w-0">
<div class="d-sm-none small mb-from">Facebook</div>
<div class="text-truncate"><span class="mb-subject">You have 3 new notifications</span><span class="wdw-muted d-none d-lg-inline"> – Maya commented on your photo and 2 others liked your post.</span></div>
</div>
<time class="small wdw-muted flex-none text-end mb-time">22 Feb</time>
</li>
<li class="mb-row d-flex align-items-center gap-2 gap-md-3 px-3 py-3" data-id="4">
<input class="form-check-input mb-check mt-0 flex-none" type="checkbox" aria-label="Select message from Twitter">
<button type="button" class="btn btn-link mb-star p-0 flex-none" aria-pressed="false" aria-label="Star message from Twitter"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3-6.2 3.3L7 14.2 2 9.3l6.9-1L12 2Z"/></svg></button>
<span class="mb-from text-truncate d-none d-sm-block flex-none">Twitter</span>
<div class="mb-main flex-grow-1 min-w-0">
<div class="d-sm-none small mb-from">Twitter</div>
<div class="text-truncate"><span class="mb-subject">New followers this week</span><span class="wdw-muted d-none d-lg-inline"> – Your profile got 128 new followers. See who they are.</span></div>
</div>
<span class="mb-tag flex-none text-danger" title="Friends"><svg width="8" height="8" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg><span class="visually-hidden">Friends</span></span>
<time class="small wdw-muted flex-none text-end mb-time">21 Feb</time>
</li>
<li class="mb-row d-flex align-items-center gap-2 gap-md-3 px-3 py-3" data-id="5">
<input class="form-check-input mb-check mt-0 flex-none" type="checkbox" aria-label="Select message from Jonaly Smith">
<button type="button" class="btn btn-link mb-star p-0 flex-none is-on" aria-pressed="true" aria-label="Star message from Jonaly Smith"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3-6.2 3.3L7 14.2 2 9.3l6.9-1L12 2Z"/></svg></button>
<span class="mb-from text-truncate d-none d-sm-block flex-none">Jonaly Smith</span>
<div class="mb-main flex-grow-1 min-w-0">
<div class="d-sm-none small mb-from">Jonaly Smith</div>
<div class="text-truncate"><span class="mb-subject">Invoice #2043 is ready</span><span class="wdw-muted d-none d-lg-inline"> – Your invoice for February is attached. Payment is due in 14 days.</span></div>
</div>
<span class="mb-tag flex-none text-primary" title="Web app"><svg width="8" height="8" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg><span class="visually-hidden">Web app</span></span>
<span class="wdw-muted flex-none d-none d-sm-inline"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.4 11.1-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5"/></svg><span class="visually-hidden">Has attachment</span></span>
<time class="small wdw-muted flex-none text-end mb-time">19 Feb</time>
</li>
<li class="mb-row d-flex align-items-center gap-2 gap-md-3 px-3 py-3" data-id="6">
<input class="form-check-input mb-check mt-0 flex-none" type="checkbox" aria-label="Select message from Google Inc">
<button type="button" class="btn btn-link mb-star p-0 flex-none" aria-pressed="false" aria-label="Star message from Google Inc"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3-6.2 3.3L7 14.2 2 9.3l6.9-1L12 2Z"/></svg></button>
<span class="mb-from text-truncate d-none d-sm-block flex-none">Google Inc</span>
<div class="mb-main flex-grow-1 min-w-0">
<div class="d-sm-none small mb-from">Google Inc</div>
<div class="text-truncate"><span class="mb-subject">Your storage is almost full</span><span class="wdw-muted d-none d-lg-inline"> – You have used 92 percent of your storage. Upgrade to keep syncing.</span></div>
</div>
<time class="small wdw-muted flex-none text-end mb-time">18 Feb</time>
</li>
<li class="mb-row d-flex align-items-center gap-2 gap-md-3 px-3 py-3" data-id="7">
<input class="form-check-input mb-check mt-0 flex-none" type="checkbox" aria-label="Select message from John Doe">
<button type="button" class="btn btn-link mb-star p-0 flex-none is-on" aria-pressed="true" aria-label="Star message from John Doe"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3-6.2 3.3L7 14.2 2 9.3l6.9-1L12 2Z"/></svg></button>
<span class="mb-from text-truncate d-none d-sm-block flex-none">John Doe</span>
<div class="mb-main flex-grow-1 min-w-0">
<div class="d-sm-none small mb-from">John Doe</div>
<div class="text-truncate"><span class="mb-subject">Photos from the weekend</span><span class="wdw-muted d-none d-lg-inline"> – Here are the pictures from the trip. The sunset ones came out great.</span></div>
</div>
<span class="mb-tag flex-none text-success" title="Family"><svg width="8" height="8" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg><span class="visually-hidden">Family</span></span>
<span class="wdw-muted flex-none d-none d-sm-inline"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.4 11.1-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5"/></svg><span class="visually-hidden">Has attachment</span></span>
<time class="small wdw-muted flex-none text-end mb-time">18 Feb</time>
</li>
</ul>
<p class="text-center wdw-muted py-5 mb-0 mb-none" hidden>Your inbox is empty.</p>
</div>
</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 */
.mb-shell .flex-none { flex: none; }
.mb-shell .min-w-0 { min-width: 0; }
@media (min-width: 992px) { .mb-side { border-right: 1px solid var(--bs-border-color-translucent); } }
.mb-folder { color: var(--bs-body-color); font-weight: 500; font-size: .925rem; }
.mb-folder:hover { background: var(--bs-secondary-bg); }
.mb-folder.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 700; }
.mb-row { border-bottom: 1px solid var(--bs-border-color-translucent); font-size: .925rem; cursor: pointer; transition: background .12s; }
.mb-row:last-child { border-bottom: 0; }
.mb-row:hover { background: var(--bs-tertiary-bg); }
.mb-row.is-selected { background: var(--bs-primary-bg-subtle); }
.mb-row:not(.mb-unread) { color: var(--bs-secondary-color); }
.mb-unread .mb-from, .mb-unread .mb-subject, .mb-unread .mb-time { font-weight: 700; color: var(--bs-emphasis-color); }
.mb-from { width: 8.5rem; }
.mb-star { color: var(--bs-tertiary-color); min-height: 0 !important; line-height: 1; }
.mb-star:hover { color: var(--bs-warning); }
.mb-star.is-on { color: var(--bs-warning); }
.mb-star.is-on svg { fill: currentColor; }
.mb-time { min-width: 4.5rem; }
.mb-check { width: 1.1rem; height: 1.1rem; }
.mb-act svg { display: block; }
.mb-toolbar .btn-sm { min-width: 36px; }
@media (max-width: 575.98px) { .mb-time { min-width: 3.5rem; } }
.mb-main { min-width: 0; }
.mb-tag { line-height: 1; }
(function () {
function initMailbox() {
var shell = document.querySelector('.mb-shell');
if (!shell) return;
var list = shell.querySelector('.mb-list');
var all = shell.querySelector('#mbAll');
var empty = shell.querySelector('.mb-none');
var summary = shell.querySelector('.mb-summary');
var snapshot = list.innerHTML;
function rows() { return Array.prototype.slice.call(list.querySelectorAll('.mb-row')); }
function selected() { return rows().filter(function (r) { return r.querySelector('.mb-check').checked; }); }
function refresh() {
var rs = rows();
var sel = selected();
rs.forEach(function (r) { r.classList.toggle('is-selected', r.querySelector('.mb-check').checked); });
all.checked = rs.length > 0 && sel.length === rs.length;
all.indeterminate = sel.length > 0 && sel.length < rs.length;
var unread = list.querySelectorAll('.mb-unread').length;
summary.textContent = sel.length ? sel.length + ' selected' : unread + ' unread';
empty.hidden = rs.length > 0;
var badge = shell.querySelector('.mb-fbadge');
if (badge) badge.textContent = unread;
}
function setStar(btn, on) {
btn.classList.toggle('is-on', on);
btn.setAttribute('aria-pressed', String(on));
}
list.addEventListener('click', function (e) {
var row = e.target.closest('.mb-row');
if (!row) return;
var star = e.target.closest('.mb-star');
if (star) { setStar(star, !star.classList.contains('is-on')); return; }
if (e.target.closest('.mb-check')) { refresh(); return; }
row.classList.remove('mb-unread');
refresh();
});
all.addEventListener('change', function () {
rows().forEach(function (r) { r.querySelector('.mb-check').checked = all.checked; });
refresh();
});
shell.addEventListener('click', function (e) {
var btn = e.target.closest('.mb-act');
if (!btn) return;
var act = btn.dataset.act;
var sel = selected();
if (act === 'archive' || act === 'delete') sel.forEach(function (r) { r.remove(); });
if (act === 'read') sel.forEach(function (r) { r.classList.remove('mb-unread'); });
if (act === 'read-all') rows().forEach(function (r) { r.classList.remove('mb-unread'); });
if (act === 'unstar') list.querySelectorAll('.mb-star').forEach(function (s) { setStar(s, false); });
if (act === 'restore') list.innerHTML = snapshot;
refresh();
});
shell.querySelectorAll('.mb-folder').forEach(function (a) {
a.addEventListener('click', function (e) { e.preventDefault(); });
});
refresh();
}
initMailbox();
})();
Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.
