Bootstrap 5 Email Inbox with Compose Modal
An email inbox with a folder sidebar, searchable message list with star and select controls, and a compose modal.
<section class="wdw-stage">
<div class="container" style="max-width: 1100px">
<div class="wdw-card overflow-hidden">
<div class="row g-0">
<aside class="col-lg-3 border-end p-3 p-lg-4 bg-body-tertiary">
<div class="d-flex align-items-center gap-3 mb-4">
<img src="https://i.pravatar.cc/96?img=52" class="rounded-circle" width="48" height="48" alt="">
<div class="min-w-0"><div class="fw-bold">Jonathan Smith</div><div class="small wdw-muted text-truncate">[email protected]</div></div>
</div>
<button type="button" class="btn btn-primary rounded-pill w-100 mb-3" data-bs-toggle="modal" data-bs-target="#ibCompose">
<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 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
Compose</button>
<nav class="nav nav-pills flex-lg-column ib-folders" aria-label="Folders">
<a class="nav-link active d-flex justify-content-between align-items-center" href="#">Inbox <span class="badge text-bg-light rounded-pill">2</span></a>
<a class="nav-link" href="#">Sent</a>
<a class="nav-link" href="#">Important</a>
<a class="nav-link d-flex justify-content-between align-items-center" href="#">Drafts <span class="badge text-bg-light rounded-pill">30</span></a>
<a class="nav-link" href="#">Trash</a>
</nav>
<div class="d-none d-lg-block mt-4">
<div class="wdw-eyebrow text-body-secondary mb-2">Labels</div>
<div class="d-flex flex-wrap gap-2"><span class="badge bg-primary-subtle text-primary-emphasis rounded-pill">Work</span><span class="badge bg-primary-subtle text-primary-emphasis rounded-pill">Design</span><span class="badge bg-primary-subtle text-primary-emphasis rounded-pill">Family</span><span class="badge bg-primary-subtle text-primary-emphasis rounded-pill">Office</span></div>
</div>
</aside>
<div class="col-lg-9">
<div class="d-flex flex-wrap align-items-center gap-3 p-3 p-lg-4 border-bottom">
<h2 class="h4 wdw-heading mb-0 me-auto">Inbox</h2>
<label class="visually-hidden" for="ibSearch">Search mail</label>
<input type="search" id="ibSearch" class="form-control rounded-pill" style="max-width:260px" placeholder="Search mail">
</div>
<div class="d-flex align-items-center gap-2 px-3 px-lg-4 py-2 border-bottom small">
<input class="form-check-input mt-0" type="checkbox" id="ibAll" aria-label="Select all"><label for="ibAll" class="wdw-muted me-2">All</label>
<button type="button" class="btn btn-sm btn-outline-secondary rounded-pill">Archive</button>
<button type="button" class="btn btn-sm btn-outline-secondary rounded-pill">Delete</button>
<span class="ms-auto wdw-muted d-none d-sm-inline">1-8 of 234</span>
</div>
<ul class="list-unstyled mb-0" id="ibList">
<li class="ib-row is-unread" data-name="arjuna admin quarterly report is ready">
<input class="form-check-input ib-check" type="checkbox" aria-label="Select message from Arjuna Admin">
<button type="button" class="ib-star is-on" aria-label="Star message" aria-pressed="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg></button>
<img class="ib-avatar" src="https://i.pravatar.cc/80?img=12" alt="" width="36" height="36">
<div class="ib-main"><span class="ib-from">Arjuna Admin</span><span class="ib-subject"><strong>Quarterly report is ready</strong><span class="ib-preview"> - Numbers are final, please review before Friday.</span></span></div>
<svg class="ib-clip" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-label="Has attachment"><path d="M21 12.5l-8.5 8.5a5.5 5.5 0 0 1-8-7.7l9-9a3.7 3.7 0 0 1 5.2 5.3l-9 9a1.8 1.8 0 0 1-2.6-2.6l8.3-8.3"/></svg>
<time class="ib-date">9:27 AM</time>
</li>
<li class="ib-row is-unread" data-name="john doe hi bro, how are you?">
<input class="form-check-input ib-check" type="checkbox" aria-label="Select message from John Doe">
<button type="button" class="ib-star" aria-label="Star message" aria-pressed="false"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg></button>
<img class="ib-avatar" src="https://i.pravatar.cc/80?img=32" alt="" width="36" height="36">
<div class="ib-main"><span class="ib-from">John Doe</span><span class="ib-subject"><strong>Hi Bro, how are you?</strong><span class="ib-preview"> - Long time no see. Are you free for a call this week?</span></span></div>
<span class="ib-clip"></span>
<time class="ib-date">Mar 15</time>
</li>
<li class="ib-row" data-name="jabuk doe design handoff">
<input class="form-check-input ib-check" type="checkbox" aria-label="Select message from Jabuk Doe">
<button type="button" class="ib-star" aria-label="Star message" aria-pressed="false"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg></button>
<img class="ib-avatar" src="https://i.pravatar.cc/80?img=5" alt="" width="36" height="36">
<div class="ib-main"><span class="ib-from">Jabuk Doe</span><span class="ib-subject"><strong>Design handoff</strong><span class="ib-preview"> - Attached are the final exports for the landing page.</span></span></div>
<svg class="ib-clip" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-label="Has attachment"><path d="M21 12.5l-8.5 8.5a5.5 5.5 0 0 1-8-7.7l9-9a3.7 3.7 0 0 1 5.2 5.3l-9 9a1.8 1.8 0 0 1-2.6-2.6l8.3-8.3"/></svg>
<time class="ib-date">Jun 15</time>
</li>
<li class="ib-row" data-name="facebook you have 3 new notifications">
<input class="form-check-input ib-check" type="checkbox" aria-label="Select message from Facebook">
<button type="button" class="ib-star" aria-label="Star message" aria-pressed="false"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg></button>
<img class="ib-avatar" src="https://i.pravatar.cc/80?img=3" alt="" width="36" height="36">
<div class="ib-main"><span class="ib-from">Facebook</span><span class="ib-subject"><strong>You have 3 new notifications</strong><span class="ib-preview"> - See what you missed from your friends.</span></span></div>
<span class="ib-clip"></span>
<time class="ib-date">Apr 01</time>
</li>
<li class="ib-row" data-name="cendy andrianto urgent: contract signature">
<input class="form-check-input ib-check" type="checkbox" aria-label="Select message from Cendy Andrianto">
<button type="button" class="ib-star is-on" aria-label="Star message" aria-pressed="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg></button>
<img class="ib-avatar" src="https://i.pravatar.cc/80?img=47" alt="" width="36" height="36">
<div class="ib-main"><span class="ib-from">Cendy Andrianto</span><span class="ib-subject"><strong>Urgent: contract signature</strong><span class="ib-preview"> - Please sign and return the contract by tomorrow.</span></span></div>
<span class="ib-clip"></span>
<time class="ib-date">May 23</time>
</li>
<li class="ib-row" data-name="rosid nur lunch on thursday?">
<input class="form-check-input ib-check" type="checkbox" aria-label="Select message from Rosid Nur">
<button type="button" class="ib-star is-on" aria-label="Star message" aria-pressed="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg></button>
<img class="ib-avatar" src="https://i.pravatar.cc/80?img=64" alt="" width="36" height="36">
<div class="ib-main"><span class="ib-from">Rosid Nur</span><span class="ib-subject"><strong>Lunch on Thursday?</strong><span class="ib-preview"> - There is a new place near the office, want to try it?</span></span></div>
<svg class="ib-clip" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-label="Has attachment"><path d="M21 12.5l-8.5 8.5a5.5 5.5 0 0 1-8-7.7l9-9a3.7 3.7 0 0 1 5.2 5.3l-9 9a1.8 1.8 0 0 1-2.6-2.6l8.3-8.3"/></svg>
<time class="ib-date">Jan 19</time>
</li>
<li class="ib-row" data-name="fikriandro invoice 2024-118">
<input class="form-check-input ib-check" type="checkbox" aria-label="Select message from Fikriandro">
<button type="button" class="ib-star" aria-label="Star message" aria-pressed="false"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg></button>
<img class="ib-avatar" src="https://i.pravatar.cc/80?img=22" alt="" width="36" height="36">
<div class="ib-main"><span class="ib-from">Fikriandro</span><span class="ib-subject"><strong>Invoice 2024-118</strong><span class="ib-preview"> - Your invoice for October is attached.</span></span></div>
<svg class="ib-clip" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-label="Has attachment"><path d="M21 12.5l-8.5 8.5a5.5 5.5 0 0 1-8-7.7l9-9a3.7 3.7 0 0 1 5.2 5.3l-9 9a1.8 1.8 0 0 1-2.6-2.6l8.3-8.3"/></svg>
<time class="ib-date">Mar 09</time>
</li>
<li class="ib-row" data-name="badrasianto weekly design sync notes">
<input class="form-check-input ib-check" type="checkbox" aria-label="Select message from Badrasianto">
<button type="button" class="ib-star" aria-label="Star message" aria-pressed="false"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg></button>
<img class="ib-avatar" src="https://i.pravatar.cc/80?img=70" alt="" width="36" height="36">
<div class="ib-main"><span class="ib-from">Badrasianto</span><span class="ib-subject"><strong>Weekly design sync notes</strong><span class="ib-preview"> - Summary of what we agreed, plus action items.</span></span></div>
<span class="ib-clip"></span>
<time class="ib-date">Feb 25</time>
</li>
</ul>
<p class="text-center wdw-muted p-4 mb-0 d-none" id="ibEmpty">No messages match your search.</p>
</div>
</div>
</div>
</div>
</section>
<div class="modal fade" id="ibCompose" tabindex="-1" aria-labelledby="ibComposeTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"><div class="modal-content border-0 shadow">
<div class="modal-header border-0"><h3 class="modal-title h5 fw-bold" id="ibComposeTitle">New message</h3><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>
<form class="modal-body pt-0" id="ibForm">
<div class="form-floating mb-3"><input type="email" class="form-control" id="ibTo" placeholder="To" required><label for="ibTo">To</label></div>
<div class="form-floating mb-3"><input type="text" class="form-control" id="ibSubj" placeholder="Subject"><label for="ibSubj">Subject</label></div>
<div class="form-floating mb-3"><textarea class="form-control" id="ibBody" placeholder="Message" style="height:150px;min-height:150px"></textarea><label for="ibBody">Message</label></div>
<div class="d-flex justify-content-end gap-2"><button type="button" class="btn btn-outline-secondary rounded-pill" data-bs-dismiss="modal">Discard</button><button type="submit" class="btn btn-primary rounded-pill px-4">Send</button></div>
</form>
</div></div>
</div>
/* 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 */
.min-w-0 { min-width: 0; }
.ib-folders .nav-link { border-radius: .75rem; padding: .6rem .9rem; }
.ib-folders .nav-link:not(.active):hover { background: var(--bs-secondary-bg); }
.ib-folders .active .badge { background: rgba(255,255,255,.25) !important; color: #fff !important; }
@media (max-width: 991.98px) { .ib-folders { flex-wrap: nowrap; overflow-x: auto; } .ib-folders .nav-link { white-space: nowrap; } }
.ib-row { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); transition: background .15s; }
@media (min-width: 992px) { .ib-row { padding-inline: 1.5rem; } }
.ib-row:hover { background: var(--bs-tertiary-bg); }
.ib-row.is-unread { background: var(--bs-primary-bg-subtle); }
.ib-row.is-unread .ib-from { font-weight: 700; }
.ib-check { flex: none; margin: 0; }
.ib-star { flex: none; border: 0; background: none; padding: .25rem; color: var(--bs-border-color); line-height: 0; border-radius: 50%; }
.ib-star.is-on { color: #f59e0b; }
.ib-star:focus-visible { outline: 2px solid var(--bs-primary); }
.ib-avatar { border-radius: 50%; flex: none; object-fit: cover; }
.ib-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ib-from { font-size: .875rem; font-weight: 600; }
.ib-subject { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bs-secondary-color); }
.ib-subject strong { color: var(--bs-body-color); font-weight: 600; }
.ib-clip { flex: none; width: 16px; color: var(--bs-secondary-color); }
.ib-date { flex: none; font-size: .78rem; color: var(--bs-secondary-color); min-width: 3.5rem; text-align: right; }
@media (max-width: 575.98px) { .ib-preview, .ib-clip, .ib-avatar { display: none; } .ib-date { min-width: 0; } }
(function () {
function initInbox() {
var list = document.getElementById('ibList');
if (!list) return;
var rows = list.querySelectorAll('.ib-row');
list.addEventListener('click', function (e) {
var star = e.target.closest('.ib-star');
if (!star) return;
var on = star.classList.toggle('is-on');
star.setAttribute('aria-pressed', on);
});
var all = document.getElementById('ibAll');
if (all) all.addEventListener('change', function () {
list.querySelectorAll('.ib-check').forEach(function (c) { c.checked = all.checked; });
});
var search = document.getElementById('ibSearch');
var empty = document.getElementById('ibEmpty');
if (search) search.addEventListener('input', function () {
var q = search.value.trim().toLowerCase(), shown = 0;
rows.forEach(function (r) {
var hit = !q || r.dataset.name.indexOf(q) !== -1;
r.classList.toggle('d-none', !hit);
if (hit) shown++;
});
empty.classList.toggle('d-none', shown > 0);
});
var form = document.getElementById('ibForm');
var modalEl = document.getElementById('ibCompose');
if (form && modalEl) form.addEventListener('submit', function (e) {
e.preventDefault();
form.reset();
bootstrap.Modal.getOrCreateInstance(modalEl).hide();
});
}
initInbox();
})();
Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.
