Bootstrap 5
Filter
Galerie Images
Animation
Responsive
Template
Javascript
Composant de galerie d'images avec filtres : design moderne, animations fluides, interface utilisateur intuitive.
<!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 Galerie Images Filtres Bootstrap5 2026 05041924 | AngularForAll</title>
<!-- Bootstrap 5 CSS + icônes -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<style>
/* Style de base pour la galerie */
.gallery-item {
transition: all 0.3s ease;
}
.gallery-item.hidden {
display: none;
}
.gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 8px;
transition: transform 0.3s ease;
}
.gallery-item img:hover {
transform: scale(1.03);
}
.filter-btn {
margin: 0 5px 10px 5px;
}
.filter-btn.active {
background-color: #0d6efd;
color: white;
border-color: #0d6efd;
}
.gallery-title {
font-weight: 300;
letter-spacing: 1px;
}
.card-overlay {
background: rgba(0,0,0,0.03);
border-radius: 8px;
}
</style>
</head>
<body>
<!-- En-tête -->
<header class="bg-light py-4 mb-4 shadow-sm">
<div class="container">
<h1 class="display-5 text-center gallery-title">
<i class="bi bi-images text-primary"></i> Galerie filtrante
</h1>
<p class="text-center text-muted">Cliquez sur un filtre pour trier les images</p>
</div>
</header>
<!-- Section filtre + galerie -->
<section class="container pb-5">
<!-- Boutons filtres -->
<div class="row mb-4">
<div class="col-12 text-center">
<div class="btn-group flex-wrap" role="group" aria-label="Filtres">
<button type="button" class="btn btn-outline-primary filter-btn active" data-filter="all">Tout</button>
<button type="button" class="btn btn-outline-primary filter-btn" data-filter="nature">🌿 Nature</button>
<button type="button" class="btn btn-outline-primary filter-btn" data-filter="ville">🏙️ Ville</button>
<button type="button" class="btn btn-outline-primary filter-btn" data-filter="animaux">🐾 Animaux</button>
<button type="button" class="btn btn-outline-primary filter-btn" data-filter="art">🎨 Art</button>
</div>
</div>
</div>
<!-- Grille des images -->
<div class="row g-4" id="gallery-container">
<!-- Chaque item possède une classe de filtre (ex: nature, ville, etc.) -->
<!-- 1 - Nature -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item nature">
<div class="card border-0 shadow-sm h-100 card-overlay">
<img src="public/main-phone.webp" alt="Nature" loading="lazy">
<div class="card-body text-center p-2">
<span class="badge bg-success">Nature</span>
</div>
</div>
</div>
<!-- 2 - Ville -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item ville">
<div class="card border-0 shadow-sm h-100 card-overlay">
<img src="public/main-robot.webp" alt="Ville" loading="lazy">
<div class="card-body text-center p-2">
<span class="badge bg-primary">Ville</span>
</div>
</div>
</div>
<!-- 3 - Animaux -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item animaux">
<div class="card border-0 shadow-sm h-100 card-overlay">
<img src="public/baff.webp" alt="Animaux" loading="lazy">
<div class="card-body text-center p-2">
<span class="badge bg-warning text-dark">Animaux</span>
</div>
</div>
</div>
<!-- 4 - Art -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item art">
<div class="card border-0 shadow-sm h-100 card-overlay">
<img src="public/mosquee.jpeg" alt="Art" loading="lazy">
<div class="card-body text-center p-2">
<span class="badge bg-danger">Art</span>
</div>
</div>
</div>
<!-- 5 - Nature -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item nature">
<div class="card border-0 shadow-sm h-100 card-overlay">
<img src="public/mobile4.png" alt="Nature" loading="lazy">
<div class="card-body text-center p-2">
<span class="badge bg-success">Nature</span>
</div>
</div>
</div>
<!-- 6 - Ville -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item ville">
<div class="card border-0 shadow-sm h-100 card-overlay">
<img src="public/bg1.webp" alt="Ville" loading="lazy">
<div class="card-body text-center p-2">
<span class="badge bg-primary">Ville</span>
</div>
</div>
</div>
<!-- 7 - Animaux -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item animaux">
<div class="card border-0 shadow-sm h-100 card-overlay">
<img src="public/smartwash.webp" alt="Animaux" loading="lazy">
<div class="card-body text-center p-2">
<span class="badge bg-warning text-dark">Animaux</span>
</div>
</div>
</div>
<!-- 8 - Art -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item art">
<div class="card border-0 shadow-sm h-100 card-overlay">
<img src="public/phoneL.webp" alt="Art" loading="lazy">
<div class="card-body text-center p-2">
<span class="badge bg-danger">Art</span>
</div>
</div>
</div>
<!-- 9 - Nature -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item nature">
<div class="card border-0 shadow-sm h-100 card-overlay">
<img src="public/sac.webp" alt="Nature" loading="lazy">
<div class="card-body text-center p-2">
<span class="badge bg-success">Nature</span>
</div>
</div>
</div>
<!-- 10 - Ville -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item ville">
<div class="card border-0 shadow-sm h-100 card-overlay">
<img src="public/bg1.webp" alt="Ville" loading="lazy">
<div class="card-body text-center p-2">
<span class="badge bg-primary">Ville</span>
</div>
</div>
</div>
<!-- 11 - Animaux -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item animaux">
<div class="card border-0 shadow-sm h-100 card-overlay">
<img src="public/smartwash.webp" alt="Animaux" loading="lazy">
<div class="card-body text-center p-2">
<span class="badge bg-warning text-dark">Animaux</span>
</div>
</div>
</div>
<!-- 12 - Art -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item art">
<div class="card border-0 shadow-sm h-100 card-overlay">
<img src="public/phoneL.webp" alt="Art" loading="lazy">
<div class="card-body text-center p-2">
<span class="badge bg-danger">Art</span>
</div>
</div>
</div>
</div>
</section>
<!-- Pied de page -->
<footer class="bg-light py-4 mt-4 border-top">
<div class="container text-center text-muted">
<p class="mb-0">Galerie filtrante avec <i class="bi bi-bootstrap-fill text-primary"></i> Bootstrap 5</p>
<small>Images provenant d'Unsplash</small>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Script filtrant (vanilla JS) -->
<script>
(function() {
// Sélection des boutons et des items de la galerie
const filterBtns = document.querySelectorAll('.filter-btn');
const galleryItems = document.querySelectorAll('.gallery-item');
// Fonction pour filtrer
function filterGallery(filterValue) {
galleryItems.forEach(item => {
// Si "all" ou si l'item possède la classe correspondant au filtre
if (filterValue === 'all' || item.classList.contains(filterValue)) {
item.classList.remove('hidden');
} else {
item.classList.add('hidden');
}
});
}
// Gestionnaire d'événements sur les boutons
filterBtns.forEach(btn => {
btn.addEventListener('click', function(e) {
// Supprimer la classe active de tous les boutons
filterBtns.forEach(b => b.classList.remove('active'));
// Ajouter la classe active au bouton cliqué
this.classList.add('active');
// Récupérer la valeur du filtre
const filterValue = this.getAttribute('data-filter');
filterGallery(filterValue);
});
});
// Initialisation : afficher tout (le bouton "Tout" est actif par défaut)
// Mais pour sécurité on force le filtre "all" au chargement
filterGallery('all');
})();
</script>
<!-- Note : les images sont hébergées sur Unsplash (CDN) et chargées en lazy loading -->
</body>
</html>
Télécharger le fichier source