Bootstrap 5
Sidebar
Filtre
Catalogue
Accordeon
Checkbox
Slider
Responsive
Html
Snippet
Sidebar de filtrage produits Bootstrap 5 avec accordéons natifs, checkboxes stylisées, slider de prix et badges de sélection actifs.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippets Sidebarfilter Bootstrap 5 2026 05011630 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row">
<!-- Sidebar Filters -->
<div class="col-lg-3 col-xl-3">
<!-- Mobile Toggle Button -->
<button class="btn btn-primary d-lg-none w-100 my-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas">
<i class="bi bi-funnel"></i> Filtres
</button>
<!-- Desktop Sidebar -->
<div class="d-none d-lg-block">
<div class="card shadow-sm border-0 sticky-top" style="top: 1rem;">
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center py-3">
<h5 class="mb-0"><i class="bi bi-funnel-fill"></i> Filtres</h5>
<button class="btn btn-sm btn-outline-light" id="clearAllDesktop">
<i class="bi bi-x-circle"></i> Effacer
</button>
</div>
<div class="card-body p-0">
<!-- Active Filters -->
<div class="p-3 border-bottom" id="activeFiltersDesktop">
<div class="d-flex flex-wrap gap-1" id="activeFilterTagsDesktop"></div>
</div>
<!-- Accordion Filters -->
<div class="accordion accordion-flush" id="filterAccordionDesktop">
<!-- Categories -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#catDesktop">
<i class="bi bi-grid me-2"></i> Catégories
</button>
</h2>
<div id="catDesktop" class="accordion-collapse collapse show" data-bs-parent="#filterAccordionDesktop">
<div class="accordion-body">
<div class="list-group list-group-flush">
<button class="list-group-item list-group-item-action active" data-category="all">
Tout <span class="badge bg-primary rounded-pill float-end">120</span>
</button>
<button class="list-group-item list-group-item-action" data-category="electronics">
Électronique <span class="badge bg-secondary rounded-pill float-end">34</span>
</button>
<button class="list-group-item list-group-item-action" data-category="clothing">
Vêtements <span class="badge bg-secondary rounded-pill float-end">28</span>
</button>
<button class="list-group-item list-group-item-action" data-category="home">
Maison <span class="badge bg-secondary rounded-pill float-end">22</span>
</button>
<button class="list-group-item list-group-item-action" data-category="sports">
Sports <span class="badge bg-secondary rounded-pill float-end">18</span>
</button>
</div>
</div>
</div>
</div>
<!-- Price Range -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#priceDesktop">
<i class="bi bi-cash me-2"></i> Prix
</button>
</h2>
<div id="priceDesktop" class="accordion-collapse collapse show" data-bs-parent="#filterAccordionDesktop">
<div class="accordion-body">
<div class="row g-2 align-items-center">
<div class="col-5">
<input type="number" class="form-control form-control-sm" placeholder="Min" id="priceMinDesktop" value="0">
</div>
<div class="col-2 text-center text-muted">—</div>
<div class="col-5">
<input type="number" class="form-control form-control-sm" placeholder="Max" id="priceMaxDesktop" value="1000">
</div>
</div>
<button class="btn btn-primary btn-sm w-100 mt-2">
<i class="bi bi-check-lg"></i> Appliquer
</button>
</div>
</div>
</div>
<!-- Ratings -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ratingDesktop">
<i class="bi bi-star me-2"></i> Notes
</button>
</h2>
<div id="ratingDesktop" class="accordion-collapse collapse" data-bs-parent="#filterAccordionDesktop">
<div class="accordion-body">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" value="4" id="rating4Desktop">
<label class="form-check-label" for="rating4Desktop">
<span class="text-warning">★★★★</span>☆ & plus
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" value="3" id="rating3Desktop">
<label class="form-check-label" for="rating3Desktop">
<span class="text-warning">★★★</span>☆☆ & plus
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="2" id="rating2Desktop">
<label class="form-check-label" for="rating2Desktop">
<span class="text-warning">★★</span>☆☆☆ & plus
</label>
</div>
</div>
</div>
</div>
<!-- Colors -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#colorsDesktop">
<i class="bi bi-palette me-2"></i> Couleurs
</button>
</h2>
<div id="colorsDesktop" class="accordion-collapse collapse" data-bs-parent="#filterAccordionDesktop">
<div class="accordion-body">
<div class="d-flex flex-wrap gap-2">
<button class="btn btn-outline-dark rounded-circle p-0" style="width:36px;height:36px;background:#1a1a1a" data-color="noir" title="Noir"></button>
<button class="btn btn-outline-secondary rounded-circle p-0" style="width:36px;height:36px;background:#f5f5f5" data-color="blanc" title="Blanc"></button>
<button class="btn btn-outline-danger rounded-circle p-0" style="width:36px;height:36px;background:#dc2626" data-color="rouge" title="Rouge"></button>
<button class="btn btn-outline-primary rounded-circle p-0" style="width:36px;height:36px;background:#2563eb" data-color="bleu" title="Bleu"></button>
<button class="btn btn-outline-success rounded-circle p-0" style="width:36px;height:36px;background:#16a34a" data-color="vert" title="Vert"></button>
<button class="btn btn-outline-warning rounded-circle p-0" style="width:36px;height:36px;background:#f59e0b" data-color="jaune" title="Jaune"></button>
<button class="btn btn-outline-purple rounded-circle p-0" style="width:36px;height:36px;background:#7c3aed" data-color="violet" title="Violet"></button>
</div>
</div>
</div>
</div>
<!-- Sizes -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sizesDesktop">
<i class="bi bi-rulers me-2"></i> Tailles
</button>
</h2>
<div id="sizesDesktop" class="accordion-collapse collapse" data-bs-parent="#filterAccordionDesktop">
<div class="accordion-body">
<div class="d-flex flex-wrap gap-2">
<button class="btn btn-outline-secondary btn-sm" data-size="XS">XS</button>
<button class="btn btn-outline-secondary btn-sm" data-size="S">S</button>
<button class="btn btn-primary btn-sm active" data-size="M">M</button>
<button class="btn btn-outline-secondary btn-sm" data-size="L">L</button>
<button class="btn btn-outline-secondary btn-sm" data-size="XL">XL</button>
<button class="btn btn-outline-secondary btn-sm disabled" data-size="XXL">XXL</button>
</div>
</div>
</div>
</div>
<!-- Brands -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#brandsDesktop">
<i class="bi bi-tag me-2"></i> Marques
</button>
</h2>
<div id="brandsDesktop" class="accordion-collapse collapse" data-bs-parent="#filterAccordionDesktop">
<div class="accordion-body">
<input type="text" class="form-control form-control-sm mb-2" placeholder="Rechercher une marque...">
<div class="form-check mb-1">
<input class="form-check-input" type="checkbox" value="apple" id="appleDesktop">
<label class="form-check-label" for="appleDesktop">Apple</label>
</div>
<div class="form-check mb-1">
<input class="form-check-input" type="checkbox" value="samsung" id="samsungDesktop">
<label class="form-check-label" for="samsungDesktop">Samsung</label>
</div>
<div class="form-check mb-1">
<input class="form-check-input" type="checkbox" value="nike" id="nikeDesktop">
<label class="form-check-label" for="nikeDesktop">Nike</label>
</div>
<div class="form-check mb-1">
<input class="form-check-input" type="checkbox" value="adidas" id="adidasDesktop">
<label class="form-check-label" for="adidasDesktop">Adidas</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="sony" id="sonyDesktop">
<label class="form-check-label" for="sonyDesktop">Sony</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer bg-white">
<button class="btn btn-primary w-100" id="applyFiltersDesktop">
<i class="bi bi-check2-all"></i> Appliquer les filtres
</button>
</div>
</div>
</div>
<!-- Mobile Offcanvas -->
<div class="offcanvas offcanvas-start d-lg-none" tabindex="-1" id="filterOffcanvas">
<div class="offcanvas-header bg-primary text-white">
<h5 class="offcanvas-title"><i class="bi bi-funnel-fill"></i> Filtres</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
</div>
<div class="offcanvas-body p-0">
<!-- Same accordion structure for mobile -->
<div class="p-3 border-bottom">
<div class="d-flex flex-wrap gap-1" id="activeFilterTagsMobile"></div>
</div>
<div class="accordion accordion-flush" id="filterAccordionMobile">
<!-- Categories -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#catMobile">
<i class="bi bi-grid me-2"></i> Catégories
</button>
</h2>
<div id="catMobile" class="accordion-collapse collapse show" data-bs-parent="#filterAccordionMobile">
<div class="accordion-body">
<div class="list-group list-group-flush">
<button class="list-group-item list-group-item-action active" data-category="all">
Tout <span class="badge bg-primary rounded-pill float-end">120</span>
</button>
<button class="list-group-item list-group-item-action" data-category="electronics">
Électronique <span class="badge bg-secondary rounded-pill float-end">34</span>
</button>
<button class="list-group-item list-group-item-action" data-category="clothing">
Vêtements <span class="badge bg-secondary rounded-pill float-end">28</span>
</button>
<button class="list-group-item list-group-item-action" data-category="home">
Maison <span class="badge bg-secondary rounded-pill float-end">22</span>
</button>
<button class="list-group-item list-group-item-action" data-category="sports">
Sports <span class="badge bg-secondary rounded-pill float-end">18</span>
</button>
</div>
</div>
</div>
</div>
<!-- Price -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#priceMobile">
<i class="bi bi-cash me-2"></i> Prix
</button>
</h2>
<div id="priceMobile" class="accordion-collapse collapse show" data-bs-parent="#filterAccordionMobile">
<div class="accordion-body">
<div class="row g-2 align-items-center">
<div class="col-5">
<input type="number" class="form-control form-control-sm" placeholder="Min" value="0">
</div>
<div class="col-2 text-center text-muted">—</div>
<div class="col-5">
<input type="number" class="form-control form-control-sm" placeholder="Max" value="1000">
</div>
</div>
<button class="btn btn-primary btn-sm w-100 mt-2">Appliquer</button>
</div>
</div>
</div>
<!-- Ratings -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ratingMobile">
<i class="bi bi-star me-2"></i> Notes
</button>
</h2>
<div id="ratingMobile" class="accordion-collapse collapse" data-bs-parent="#filterAccordionMobile">
<div class="accordion-body">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" value="4" id="rating4Mobile">
<label class="form-check-label"><span class="text-warning">★★★★</span>☆ & plus</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" value="3" id="rating3Mobile">
<label class="form-check-label"><span class="text-warning">★★★</span>☆☆ & plus</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="2" id="rating2Mobile">
<label class="form-check-label"><span class="text-warning">★★</span>☆☆☆ & plus</label>
</div>
</div>
</div>
</div>
<!-- Colors -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#colorsMobile">
<i class="bi bi-palette me-2"></i> Couleurs
</button>
</h2>
<div id="colorsMobile" class="accordion-collapse collapse" data-bs-parent="#filterAccordionMobile">
<div class="accordion-body">
<div class="d-flex flex-wrap gap-2">
<button class="btn btn-outline-dark rounded-circle p-0" style="width:40px;height:40px;background:#1a1a1a" aria-label="Noir"></button>
<button class="btn btn-outline-secondary rounded-circle p-0" style="width:40px;height:40px;background:#f5f5f5" aria-label="Gris"></button>
<button class="btn btn-outline-danger rounded-circle p-0" style="width:40px;height:40px;background:#dc2626" aria-label="Rouge"></button>
<button class="btn btn-outline-primary rounded-circle p-0" style="width:40px;height:40px;background:#2563eb" aria-label="Bleu"></button>
<button class="btn btn-outline-success rounded-circle p-0" style="width:40px;height:40px;background:#16a34a" aria-label="Vert"></button>
<button class="btn btn-outline-warning rounded-circle p-0" style="width:40px;height:40px;background:#f59e0b" aria-label="Orange"></button>
</div>
</div>
</div>
</div>
<!-- Sizes -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sizesMobile">
<i class="bi bi-rulers me-2"></i> Tailles
</button>
</h2>
<div id="sizesMobile" class="accordion-collapse collapse" data-bs-parent="#filterAccordionMobile">
<div class="accordion-body">
<div class="d-flex flex-wrap gap-2">
<button class="btn btn-outline-secondary btn-sm" aria-label="Extra-Small">XS</button>
<button class="btn btn-outline-secondary btn-sm" aria-label="Small">S</button>
<button class="btn btn-primary btn-sm active" aria-label="Medium">M</button>
<button class="btn btn-outline-secondary btn-sm" aria-label="Large">L</button>
<button class="btn btn-outline-secondary btn-sm" aria-label="Extra-Large">XL</button>
<button class="btn btn-outline-secondary btn-sm disabled" aria-label="Extra-Extra-Large">XXL</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offcanvas-footer p-3 border-top">
<div class="d-grid gap-2">
<button class="btn btn-primary" data-bs-dismiss="offcanvas">
<i class="bi bi-check2-all"></i> Appliquer
</button>
<button class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">
<i class="bi bi-x-circle"></i> Effacer
</button>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="col-lg-9 col-xl-9">
<div class="py-4">
<h1 class="mb-2">Produits</h1>
<p class="text-muted">
<span id="resultsCount">120</span> résultats trouvés
</p>
<!-- Loading -->
<div class="d-none justify-content-center py-5" id="loadingSpinner">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
</div>
<!-- Products -->
<div class="alert alert-info">
<i class="bi bi-info-circle"></i>
Utilisez les filtres dans la barre latérale (desktop) ou le bouton Filtres (mobile).
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Gestion des catégories
document.querySelectorAll('.list-group-item').forEach(btn => {
btn.addEventListener('click', function() {
const parent = this.closest('.list-group');
parent.querySelectorAll('.list-group-item').forEach(b => b.classList.remove('active'));
this.classList.add('active');
applyFilters();
});
});
// Gestion des couleurs
document.querySelectorAll('[data-color]').forEach(btn => {
btn.addEventListener('click', function() {
this.classList.toggle('active');
applyFilters();
});
});
// Gestion des tailles
document.querySelectorAll('[data-size]').forEach(btn => {
btn.addEventListener('click', function() {
if (this.classList.contains('disabled')) return;
this.classList.toggle('active');
applyFilters();
});
});
// Gestion des checkboxes
document.querySelectorAll('.form-check-input').forEach(cb => {
cb.addEventListener('change', applyFilters);
});
function applyFilters() {
const spinner = document.getElementById('loadingSpinner');
spinner.classList.remove('d-none');
spinner.classList.add('d-flex');
setTimeout(() => {
spinner.classList.add('d-none');
spinner.classList.remove('d-flex');
const randomCount = Math.floor(Math.random() * 50) + 10;
document.getElementById('resultsCount').textContent = randomCount;
console.log('Filtres appliqués');
}, 500);
}
// Effacer tous les filtres
document.getElementById('clearAllDesktop').addEventListener('click', () => {
document.querySelectorAll('.list-group-item').forEach(b => b.classList.remove('active'));
document.querySelector('.list-group-item[data-category="all"]').classList.add('active');
document.querySelectorAll('[data-color].active').forEach(b => b.classList.remove('active'));
document.querySelectorAll('[data-size].active').forEach(b => b.classList.remove('active'));
document.querySelector('[data-size="M"]').classList.add('active');
document.querySelectorAll('.form-check-input').forEach(cb => cb.checked = false);
applyFilters();
});
</script>
</body>
</html>
Télécharger le fichier source