Bootstrap 5 Product List with Sidebar Filters
An e-commerce product grid with a filter sidebar for room, colour and style that updates the list instantly and folds into a Filters button on mobile.
<section class="wdw-stage p-0 align-items-start">
<div class="w-100">
<nav class="navbar bg-body border-bottom"><div class="container-xxl"><a class="navbar-brand fw-bold" href="#">FORCEPAUSED</a>
<ul class="nav d-none d-md-flex"><li class="nav-item"><a class="nav-link" href="#">Women</a></li><li class="nav-item"><a class="nav-link" href="#">Men</a></li><li class="nav-item"><a class="nav-link active text-body-emphasis" href="#" aria-current="page">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Sale</a></li></ul>
<button class="btn btn-outline-secondary rounded-pill btn-sm d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#filters" aria-expanded="false" aria-controls="filters">Filters</button></div></nav>
<div class="container-xxl py-4"><div class="row g-4">
<aside class="col-lg-3 col-xl-2"><div class="collapse d-lg-block" id="filters"><div class="wdw-card-sm p-3 p-lg-4"><div class="mb-4"><h2 class="wdw-eyebrow mb-2">Room</h2><div class="list-group list-group-flush gap-1" id="f-cat"><button type="button" class="list-group-item list-group-item-action border-0 rounded-3 active" data-group="cat" data-value="all">All</button><button type="button" class="list-group-item list-group-item-action border-0 rounded-3 " data-group="cat" data-value="living">Living</button><button type="button" class="list-group-item list-group-item-action border-0 rounded-3 " data-group="cat" data-value="office">Office</button><button type="button" class="list-group-item list-group-item-action border-0 rounded-3 " data-group="cat" data-value="kitchen">Kitchen</button></div></div>
<div class="mb-4"><h2 class="wdw-eyebrow mb-2">Colour</h2><div class="d-flex gap-2 flex-wrap" id="f-color"><input type="radio" class="btn-check" name="color" id="c-all" value="all" autocomplete="off" checked><label class="wdw-swatch" for="c-all" title="Any" style="--c:conic-gradient(#ef4444,#f59e0b,#10b981,#3b82f6,#8b5cf6,#ef4444)"><span class="visually-hidden">Any</span></label><input type="radio" class="btn-check" name="color" id="c-green" value="green" autocomplete="off"><label class="wdw-swatch" for="c-green" title="Green" style="--c:#047857"><span class="visually-hidden">Green</span></label><input type="radio" class="btn-check" name="color" id="c-yellow" value="yellow" autocomplete="off"><label class="wdw-swatch" for="c-yellow" title="Yellow" style="--c:#eab308"><span class="visually-hidden">Yellow</span></label><input type="radio" class="btn-check" name="color" id="c-brown" value="brown" autocomplete="off"><label class="wdw-swatch" for="c-brown" title="Wood" style="--c:#92643a"><span class="visually-hidden">Wood</span></label><input type="radio" class="btn-check" name="color" id="c-blue" value="blue" autocomplete="off"><label class="wdw-swatch" for="c-blue" title="Blue" style="--c:#7dd3fc"><span class="visually-hidden">Blue</span></label><input type="radio" class="btn-check" name="color" id="c-neutral" value="neutral" autocomplete="off"><label class="wdw-swatch" for="c-neutral" title="Neutral" style="--c:#d6d3d1"><span class="visually-hidden">Neutral</span></label></div></div>
<div><h2 class="wdw-eyebrow mb-2">Style</h2><div class="d-flex gap-2 flex-wrap" id="f-style"><input type="radio" class="btn-check" name="style" id="s-all" value="all" autocomplete="off" checked><label class="btn btn-sm btn-outline-secondary rounded-pill" for="s-all">Any</label><input type="radio" class="btn-check" name="style" id="s-modern" value="modern" autocomplete="off"><label class="btn btn-sm btn-outline-secondary rounded-pill" for="s-modern">Modern</label><input type="radio" class="btn-check" name="style" id="s-classic" value="classic" autocomplete="off"><label class="btn btn-sm btn-outline-secondary rounded-pill" for="s-classic">Classic</label><input type="radio" class="btn-check" name="style" id="s-rustic" value="rustic" autocomplete="off"><label class="btn btn-sm btn-outline-secondary rounded-pill" for="s-rustic">Rustic</label></div></div></div></div></aside>
<main class="col-lg-9 col-xl-10"><div class="d-flex justify-content-between align-items-baseline mb-3"><h1 class="h4 wdw-heading mb-0">Home furniture</h1><span class="small wdw-muted" id="p-count" role="status"></span></div>
<div class="row g-3" id="p-grid"><div class="col-6 col-md-4 col-xl-3 wdw-prod" data-cat="kitchen" data-color="blue" data-style="modern">
<article class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
<div class="ratio ratio-1x1"><img src="https://images.unsplash.com/photo-1503602642458-232111445657?auto=format&fit=crop&w=500&h=500&q=70" class="object-fit-cover" alt="Pale oak stool" loading="lazy"></div>
<div class="card-body p-3"><h2 class="h6 mb-1">Pale oak stool</h2><div class="d-flex justify-content-between align-items-center"><span class="fw-bold">$90</span><span class="small wdw-muted text-capitalize">kitchen</span></div></div>
</article></div>
<div class="col-6 col-md-4 col-xl-3 wdw-prod" data-cat="office" data-color="neutral" data-style="modern">
<article class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
<div class="ratio ratio-1x1"><img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=500&h=500&q=70" class="object-fit-cover" alt="Studio workspace" loading="lazy"></div>
<div class="card-body p-3"><h2 class="h6 mb-1">Studio workspace</h2><div class="d-flex justify-content-between align-items-center"><span class="fw-bold">$480</span><span class="small wdw-muted text-capitalize">office</span></div></div>
</article></div>
<div class="col-6 col-md-4 col-xl-3 wdw-prod" data-cat="living" data-color="green" data-style="classic">
<article class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
<div class="ratio ratio-1x1"><img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=500&h=500&q=70" class="object-fit-cover" alt="Emerald velvet sofa" loading="lazy"></div>
<div class="card-body p-3"><h2 class="h6 mb-1">Emerald velvet sofa</h2><div class="d-flex justify-content-between align-items-center"><span class="fw-bold">$950</span><span class="small wdw-muted text-capitalize">living</span></div></div>
</article></div>
<div class="col-6 col-md-4 col-xl-3 wdw-prod" data-cat="living" data-color="neutral" data-style="rustic">
<article class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
<div class="ratio ratio-1x1"><img src="https://images.unsplash.com/photo-1493809842364-78817add7ffb?auto=format&fit=crop&w=500&h=500&q=70" class="object-fit-cover" alt="Sunlit living room set" loading="lazy"></div>
<div class="card-body p-3"><h2 class="h6 mb-1">Sunlit living room set</h2><div class="d-flex justify-content-between align-items-center"><span class="fw-bold">$390</span><span class="small wdw-muted text-capitalize">living</span></div></div>
</article></div>
<div class="col-6 col-md-4 col-xl-3 wdw-prod" data-cat="living" data-color="neutral" data-style="modern">
<article class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
<div class="ratio ratio-1x1"><img src="https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=500&h=500&q=70" class="object-fit-cover" alt="Grey sofa with coffee table" loading="lazy"></div>
<div class="card-body p-3"><h2 class="h6 mb-1">Grey sofa with coffee table</h2><div class="d-flex justify-content-between align-items-center"><span class="fw-bold">$740</span><span class="small wdw-muted text-capitalize">living</span></div></div>
</article></div>
<div class="col-6 col-md-4 col-xl-3 wdw-prod" data-cat="living" data-color="brown" data-style="rustic">
<article class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
<div class="ratio ratio-1x1"><img src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?auto=format&fit=crop&w=500&h=500&q=70" class="object-fit-cover" alt="Boho lounge set" loading="lazy"></div>
<div class="card-body p-3"><h2 class="h6 mb-1">Boho lounge set</h2><div class="d-flex justify-content-between align-items-center"><span class="fw-bold">$860</span><span class="small wdw-muted text-capitalize">living</span></div></div>
</article></div>
<div class="col-6 col-md-4 col-xl-3 wdw-prod" data-cat="living" data-color="neutral" data-style="classic">
<article class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
<div class="ratio ratio-1x1"><img src="https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?auto=format&fit=crop&w=500&h=500&q=70" class="object-fit-cover" alt="Tufted armchair" loading="lazy"></div>
<div class="card-body p-3"><h2 class="h6 mb-1">Tufted armchair</h2><div class="d-flex justify-content-between align-items-center"><span class="fw-bold">$310</span><span class="small wdw-muted text-capitalize">living</span></div></div>
</article></div>
<div class="col-6 col-md-4 col-xl-3 wdw-prod" data-cat="office" data-color="yellow" data-style="modern">
<article class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
<div class="ratio ratio-1x1"><img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?auto=format&fit=crop&w=500&h=500&q=70" class="object-fit-cover" alt="Mustard accent chair" loading="lazy"></div>
<div class="card-body p-3"><h2 class="h6 mb-1">Mustard accent chair</h2><div class="d-flex justify-content-between align-items-center"><span class="fw-bold">$270</span><span class="small wdw-muted text-capitalize">office</span></div></div>
</article></div>
</div>
<p class="text-center wdw-muted py-5 d-none" id="p-empty">No products match these filters.</p></main>
</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 */
.wdw-swatch { width: 44px; height: 44px; border-radius: 50%; background: var(--c); border: 3px solid var(--bs-body-bg); box-shadow: 0 0 0 1px var(--bs-border-color); cursor: pointer; transition: box-shadow .15s; }
.btn-check:checked + .wdw-swatch { box-shadow: 0 0 0 2px var(--bs-primary); }
.btn-check:focus-visible + .wdw-swatch { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.btn-check:checked + .btn-outline-secondary { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-secondary { color: #0f1117; }
#f-cat .list-group-item { background: transparent; color: var(--bs-body-color); }
#f-cat .list-group-item:hover:not(.active) { background: var(--bs-tertiary-bg); }
#f-cat .list-group-item.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.wdw-prod .card { transition: transform .2s, box-shadow .2s; }
.wdw-prod .card:hover { transform: translateY(-3px); box-shadow: var(--wdw-shadow) !important; }
@media (prefers-reduced-motion: reduce) { .wdw-prod .card { transition: none; } }
(function () {
function initProductFilters() {
var grid = document.getElementById('p-grid');
if (!grid) return;
var items = Array.prototype.slice.call(grid.querySelectorAll('.wdw-prod'));
var count = document.getElementById('p-count');
var empty = document.getElementById('p-empty');
var state = { cat: 'all', color: 'all', style: 'all' };
function apply() {
var n = 0;
items.forEach(function (el) {
var ok = (state.cat === 'all' || el.dataset.cat === state.cat) &&
(state.color === 'all' || el.dataset.color === state.color) &&
(state.style === 'all' || el.dataset.style === state.style);
el.hidden = !ok;
if (ok) n++;
});
count.textContent = n + (n === 1 ? ' product' : ' products');
empty.classList.toggle('d-none', n > 0);
}
var cat = document.getElementById('f-cat');
cat.addEventListener('click', function (e) {
var btn = e.target.closest('[data-value]');
if (!btn) return;
cat.querySelectorAll('.list-group-item').forEach(function (b) { b.classList.toggle('active', b === btn); });
state.cat = btn.dataset.value;
apply();
});
['color', 'style'].forEach(function (key) {
document.getElementById('f-' + key).addEventListener('change', function (e) {
state[key] = e.target.value;
apply();
});
});
apply();
}
initProductFilters();
})();
<div class="pl-page">
<header class="pl-top">
<div class="pl-top-in">
<a class="pl-brand" href="#">Haven & Oak</a>
<nav class="pl-nav" aria-label="Main"><a href="#">Women's</a><a href="#">Men's</a><a href="#" aria-current="page" class="active">Home</a><a href="#">Sale</a></nav>
</div>
</header>
<div class="pl-wrap">
<details class="pl-filters" id="plFilters" open>
<summary class="pl-sum"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 5h18M6 12h12M10 19h4"/></svg> Filters</summary>
<form class="pl-form" id="plForm">
<fieldset><legend>Room</legend>
<label class="pl-opt"><input class="radio" type="radio" name="room" value="all" checked> All rooms</label><label class="pl-opt"><input class="radio" type="radio" name="room" value="living"> Living</label><label class="pl-opt"><input class="radio" type="radio" name="room" value="dining"> Dining</label><label class="pl-opt"><input class="radio" type="radio" name="room" value="office"> Office</label><label class="pl-opt"><input class="radio" type="radio" name="room" value="kitchen"> Kitchen</label>
</fieldset>
<fieldset><legend>Colour</legend>
<div class="pl-swatches"><label class="pl-swatch pl-red"><input type="checkbox" name="color" value="red"><span class="visually-hidden">Red</span></label><label class="pl-swatch pl-teal"><input type="checkbox" name="color" value="teal"><span class="visually-hidden">Teal</span></label><label class="pl-swatch pl-blue"><input type="checkbox" name="color" value="blue"><span class="visually-hidden">Blue</span></label></div>
</fieldset>
<fieldset><legend>Style</legend>
<label class="pl-opt"><input class="radio" type="radio" name="style" value="all" checked> Any style</label><label class="pl-opt"><input class="radio" type="radio" name="style" value="modern"> Modern</label><label class="pl-opt"><input class="radio" type="radio" name="style" value="classic"> Classic</label><label class="pl-opt"><input class="radio" type="radio" name="style" value="rustic"> Rustic</label>
</fieldset>
<button type="reset" class="btn-text theme-secondary btn-sm" id="plReset">Clear all</button>
</form>
</details>
<main>
<div class="pl-bar"><h1 class="fs-xl fw-bold mb-0">Home furniture</h1><span class="fg-secondary fs-sm" id="plCount" aria-live="polite">8 products</span></div>
<div class="pl-grid" id="plGrid">
<article class="pl-card" data-room="dining" data-style="modern" data-colors="red teal">
<div class="pl-img"><img src="https://images.pexels.com/photos/963486/pexels-photo-963486.jpeg?auto=compress&cs=tinysrgb&w=500" alt="Slim wooden chair" width="500" height="500" loading="lazy"></div>
<div class="pl-info"><h3 class="pl-name">Slim wooden chair</h3><div class="pl-meta"><span class="pl-price">$90</span><span class="pl-dots" aria-label="Available colours"><span class="pl-dot pl-red" title="Red"></span><span class="pl-dot pl-teal" title="Teal"></span></span></div></div>
</article>
<article class="pl-card" data-room="office" data-style="modern" data-colors="teal blue">
<div class="pl-img"><img src="https://images.pexels.com/photos/1125137/pexels-photo-1125137.jpeg?auto=compress&cs=tinysrgb&w=500" alt="Writing desk with swivel chair" width="500" height="500" loading="lazy"></div>
<div class="pl-info"><h3 class="pl-name">Writing desk with swivel chair</h3><div class="pl-meta"><span class="pl-price">$100</span><span class="pl-dots" aria-label="Available colours"><span class="pl-dot pl-teal" title="Teal"></span><span class="pl-dot pl-blue" title="Blue"></span></span></div></div>
</article>
<article class="pl-card" data-room="living" data-style="classic" data-colors="red blue">
<div class="pl-img"><img src="https://images.pexels.com/photos/3757055/pexels-photo-3757055.jpeg?auto=compress&cs=tinysrgb&w=500" alt="Tufted leather lounger" width="500" height="500" loading="lazy"></div>
<div class="pl-info"><h3 class="pl-name">Tufted leather lounger</h3><div class="pl-meta"><span class="pl-price">$950</span><span class="pl-dots" aria-label="Available colours"><span class="pl-dot pl-red" title="Red"></span><span class="pl-dot pl-blue" title="Blue"></span></span></div></div>
</article>
<article class="pl-card" data-room="dining" data-style="rustic" data-colors="red teal blue">
<div class="pl-img"><img src="https://images.unsplash.com/photo-1537182534312-f945134cce34?w=500&q=70" alt="Tree-trunk table set" width="500" height="500" loading="lazy"></div>
<div class="pl-info"><h3 class="pl-name">Tree-trunk table set</h3><div class="pl-meta"><span class="pl-price">$390</span><span class="pl-dots" aria-label="Available colours"><span class="pl-dot pl-red" title="Red"></span><span class="pl-dot pl-teal" title="Teal"></span><span class="pl-dot pl-blue" title="Blue"></span></span></div></div>
</article>
<article class="pl-card" data-room="kitchen" data-style="modern" data-colors="red">
<div class="pl-img"><img src="https://images.pexels.com/photos/3230274/pexels-photo-3230274.jpeg?auto=compress&cs=tinysrgb&w=500" alt="Red leather bar stool" width="500" height="500" loading="lazy"></div>
<div class="pl-info"><h3 class="pl-name">Red leather bar stool</h3><div class="pl-meta"><span class="pl-price">$30</span><span class="pl-dots" aria-label="Available colours"><span class="pl-dot pl-red" title="Red"></span></span></div></div>
</article>
<article class="pl-card" data-room="dining" data-style="modern" data-colors="teal">
<div class="pl-img"><img src="https://images.pexels.com/photos/3773571/pexels-photo-3773571.png?auto=compress&cs=tinysrgb&w=500" alt="Modern dining table" width="500" height="500" loading="lazy"></div>
<div class="pl-info"><h3 class="pl-name">Modern dining table</h3><div class="pl-meta"><span class="pl-price">$740</span><span class="pl-dots" aria-label="Available colours"><span class="pl-dot pl-teal" title="Teal"></span></span></div></div>
</article>
<article class="pl-card" data-room="dining" data-style="classic" data-colors="blue red">
<div class="pl-img"><img src="https://images.pexels.com/photos/534172/pexels-photo-534172.jpeg?auto=compress&cs=tinysrgb&w=500" alt="Classic dining table" width="500" height="500" loading="lazy"></div>
<div class="pl-info"><h3 class="pl-name">Classic dining table</h3><div class="pl-meta"><span class="pl-price">$760</span><span class="pl-dots" aria-label="Available colours"><span class="pl-dot pl-blue" title="Blue"></span><span class="pl-dot pl-red" title="Red"></span></span></div></div>
</article>
<article class="pl-card" data-room="office" data-style="modern" data-colors="teal blue">
<div class="pl-img"><img src="https://images.pexels.com/photos/37347/office-sitting-room-executive-sitting.jpg?auto=compress&cs=tinysrgb&w=500" alt="Executive office suite" width="500" height="500" loading="lazy"></div>
<div class="pl-info"><h3 class="pl-name">Executive office suite</h3><div class="pl-meta"><span class="pl-price">$1,290</span><span class="pl-dots" aria-label="Available colours"><span class="pl-dot pl-teal" title="Teal"></span><span class="pl-dot pl-blue" title="Blue"></span></span></div></div>
</article>
</div>
<p class="pl-empty fg-secondary" id="plEmpty" hidden>No products match these filters. Try clearing one.</p>
</main>
</div>
</div>
.pl-page { min-height: 100vh; background: var(--bs-bg-2); }
.pl-top { background: var(--bs-bg-body); border-bottom: 1px solid var(--bs-border-color); }
.pl-top-in { max-width: 76rem; margin-inline: auto; padding: .875rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pl-brand { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-fg-body); text-decoration: none; font-size: 1rem; }
.pl-nav { display: flex; gap: 1.25rem; }
.pl-nav a { color: var(--bs-fg-2); text-decoration: none; font-size: .9375rem; padding-block: .25rem; border-bottom: 2px solid transparent; }
.pl-nav a:hover, .pl-nav a.active { color: var(--bs-fg-body); border-bottom-color: var(--bs-fg-body); }
.pl-wrap { max-width: 76rem; margin-inline: auto; padding: 1.5rem 1.25rem 2.5rem; display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; align-items: start; }
.pl-filters { background: var(--bs-bg-body); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1.25rem; }
.pl-sum { list-style: none; display: flex; align-items: center; gap: .5rem; font-weight: 600; cursor: pointer; margin-bottom: 1rem; }
.pl-sum::-webkit-details-marker { display: none; }
.pl-form fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.pl-form legend { float: none; width: auto; padding: 0; margin-bottom: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-fg-3); }
.pl-opt { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; cursor: pointer; }
.pl-swatches { display: flex; gap: .625rem; }
.pl-swatch { position: relative; width: 1.875rem; height: 1.875rem; border-radius: 50%; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.pl-swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pl-swatch:has(input:checked) { outline: 2px solid var(--bs-fg-body); outline-offset: 2px; }
.pl-swatch:has(input:focus-visible) { outline: 3px solid var(--bs-primary-base); outline-offset: 2px; }
.pl-red { --c: #d94b4b; } .pl-teal { --c: #2f8f8f; } .pl-blue { --c: #3a5bd9; }
.pl-bar { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 1.25rem; }
.pl-card { background: var(--bs-bg-body); border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.pl-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .35); }
.pl-card[hidden] { display: none; }
.pl-img { aspect-ratio: 1; overflow: hidden; background: var(--bs-bg-1); }
.pl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-info { padding: .875rem 1rem 1rem; }
.pl-name { font-size: .9375rem; font-weight: 600; margin: 0 0 .5rem; }
.pl-meta { display: flex; align-items: center; justify-content: space-between; }
.pl-price { font-weight: 700; }
.pl-dots { display: flex; gap: .3rem; }
.pl-dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.pl-empty { padding: 3rem 0; text-align: center; }
@media (width < 768px) {
.pl-wrap { grid-template-columns: 1fr; gap: 1rem; padding-top: 1rem; }
.pl-nav { display: none; }
.pl-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}
function initProductFilters() {
const form = document.getElementById('plForm');
const cards = [...document.querySelectorAll('.pl-card')];
const count = document.getElementById('plCount');
const empty = document.getElementById('plEmpty');
if (!form || !cards.length) return;
const apply = () => {
const data = new FormData(form);
const room = data.get('room') || 'all';
const style = data.get('style') || 'all';
const colors = data.getAll('color');
let shown = 0;
cards.forEach((card) => {
const ok =
(room === 'all' || card.dataset.room === room) &&
(style === 'all' || card.dataset.style === style) &&
(!colors.length || colors.some((c) => card.dataset.colors.split(' ').includes(c)));
card.hidden = !ok;
if (ok) shown += 1;
});
count.textContent = `${shown} ${shown === 1 ? 'product' : 'products'}`;
empty.hidden = shown > 0;
};
form.addEventListener('change', apply);
form.addEventListener('reset', () => setTimeout(apply));
apply();
}
function initFilterPanel() {
const panel = document.getElementById('plFilters');
if (panel && window.matchMedia('(width < 768px)').matches) panel.open = false;
}
initProductFilters();
initFilterPanel();
Built on Bootstrap 6.0.0-alpha.1 (ES modules, no jQuery). Load Bootstrap through an import map and run the JavaScript as type="module" — the downloaded file is already set up that way. Alpha releases can still change class names.
Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.
