Bootstrap 5
Accordions
Bootstrap
Template
Html
Integration Accordions
Dashboard
Accordions Bootstrap 5 optimisées pour la visualisation et l'interaction. Composants modernes et responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippet Accordions Bootstrap 5 2026 23040043 | AngularForAll</title>
<!-- Bootstrap 5 + Icônes -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Polices -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
* { font-family: 'Inter', sans-serif; }
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 3rem 1rem;
}
.page-container {
max-width: 1400px;
margin: 0 auto;
}
.page-header {
text-align: center;
margin-bottom: 4rem;
color: white;
}
.page-header h1 {
font-size: 3.5rem;
font-weight: 800;
text-shadow: 0 4px 20px rgba(0,0,0,0.2);
letter-spacing: -0.02em;
}
.page-header p {
font-size: 1.2rem;
opacity: 0.95;
font-weight: 300;
}
.accordion-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 2rem;
}
.accordion-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 24px;
padding: 1.5rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.accordion-card:hover {
transform: translateY(-8px);
box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
}
.card-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: #1a1a2e;
display: flex;
align-items: center;
gap: 0.75rem;
border-bottom: 2px solid rgba(102, 126, 234, 0.2);
padding-bottom: 0.75rem;
}
.card-title i {
color: #667eea;
font-size: 1.6rem;
}
/* Styles personnalisés pour les accordéons Bootstrap */
.accordion-custom-1 .accordion-item {
border: none;
background: transparent;
margin-bottom: 0.5rem;
}
.accordion-custom-1 .accordion-button {
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecf2 100%);
border-radius: 16px !important;
font-weight: 600;
color: #2d3748;
box-shadow: none;
padding: 1rem 1.25rem;
}
.accordion-custom-1 .accordion-button:not(.collapsed) {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.accordion-custom-1 .accordion-body {
background: #f8fafc;
border-radius: 0 0 16px 16px;
}
.accordion-custom-2 .accordion-item {
border: 2px solid #e2e8f0;
border-radius: 20px;
margin-bottom: 1rem;
overflow: hidden;
}
.accordion-custom-2 .accordion-button {
background: white;
font-weight: 600;
}
.accordion-custom-2 .accordion-button:focus {
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
border-color: #22c55e;
}
.accordion-custom-2 .accordion-button:not(.collapsed) {
background: #22c55e;
color: white;
}
.accordion-custom-3 {
border: 1px solid #fbbf24;
border-radius: 24px;
overflow: hidden;
}
.accordion-custom-3 .accordion-item {
border: none;
border-bottom: 1px solid #fde68a;
}
.accordion-custom-3 .accordion-button {
background: #fffbeb;
font-weight: 600;
color: #92400e;
}
.accordion-custom-3 .accordion-button:not(.collapsed) {
background: #fbbf24;
color: #78350f;
}
.accordion-custom-4 .accordion-item {
background: #1e293b;
border: none;
margin-bottom: 0.5rem;
border-radius: 12px;
overflow: hidden;
}
.accordion-custom-4 .accordion-button {
background: #334155;
color: #e2e8f0;
font-weight: 500;
border-radius: 12px !important;
}
.accordion-custom-4 .accordion-button:not(.collapsed) {
background: #0ea5e9;
color: white;
}
.accordion-custom-4 .accordion-body {
background: #1e293b;
color: #cbd5e0;
}
.accordion-custom-5 .accordion-item {
border: none;
background: transparent;
}
.accordion-custom-5 .accordion-button {
background: white;
border-radius: 50px !important;
padding: 0.75rem 1.5rem;
font-weight: 600;
box-shadow: 0 4px 6px -2px rgba(0,0,0,0.05);
border: 1px solid #e5e7eb;
}
.accordion-custom-5 .accordion-button:not(.collapsed) {
background: #8b5cf6;
color: white;
border-color: #8b5cf6;
}
.accordion-custom-6 .accordion-item {
border: none;
margin-bottom: 0.75rem;
}
.accordion-custom-6 .accordion-button {
background: #f0fdf4;
border-left: 4px solid #10b981;
border-radius: 8px !important;
font-weight: 600;
}
.accordion-custom-6 .accordion-button:not(.collapsed) {
background: #10b981;
color: white;
}
.accordion-custom-7 .accordion-item {
border: 1px solid #fbcfe8;
border-radius: 16px;
margin-bottom: 0.75rem;
background: white;
}
.accordion-custom-7 .accordion-button {
background: transparent;
font-weight: 600;
color: #be185d;
}
.accordion-custom-7 .accordion-button:not(.collapsed) {
background: #fdf2f8;
}
.accordion-custom-8 .accordion-item {
background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
border: 1px solid #fecaca;
border-radius: 12px;
margin-bottom: 0.75rem;
}
.accordion-custom-8 .accordion-button {
background: transparent;
font-weight: 600;
color: #991b1b;
}
.accordion-custom-8 .accordion-button:not(.collapsed) {
background: #fecaca;
}
.accordion-custom-9 .accordion-item {
border: none;
background: #f3f4f6;
border-radius: 20px;
margin-bottom: 0.5rem;
}
.accordion-custom-9 .accordion-button {
background: #e5e7eb;
border-radius: 20px !important;
font-weight: 600;
}
.accordion-custom-9 .accordion-button:not(.collapsed) {
background: #3b82f6;
color: white;
}
.accordion-custom-10 .accordion-item {
border: 2px solid #c7d2fe;
border-radius: 16px;
margin-bottom: 0.75rem;
overflow: hidden;
}
.accordion-custom-10 .accordion-button {
background: #eef2ff;
font-weight: 600;
color: #3730a3;
}
.accordion-custom-10 .accordion-button:not(.collapsed) {
background: #6366f1;
color: white;
}
.badge-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: rgba(255,255,255,0.3);
border-radius: 8px;
margin-right: 10px;
font-weight: 700;
}
</style>
</head>
<body>
<div class="page-container">
<div class="page-header">
<h1><i class="bi bi-chevron-double-down me-3"></i>10 Accordéons Bootstrap</h1>
<p>Designs premium · Variations créatives · Bootstrap 5.3</p>
</div>
<div class="accordion-grid">
<!-- 1. Gradient moderne -->
<div class="accordion-card">
<div class="card-title">
<i class="bi bi-1-circle-fill"></i>
<span>Gradient Moderne</span>
</div>
<div class="accordion accordion-custom-1" id="acc1">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc1-1">
<i class="bi bi-stars me-2"></i> Fonctionnalités Premium
</button>
</h2>
<div id="acc1-1" class="accordion-collapse collapse show" data-bs-parent="#acc1">
<div class="accordion-body">
Accédez à des analyses avancées, support 24/7 et intégrations illimitées.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc1-2">
<i class="bi bi-shield-check me-2"></i> Sécurité renforcée
</button>
</h2>
<div id="acc1-2" class="accordion-collapse collapse" data-bs-parent="#acc1">
<div class="accordion-body">
Authentification à deux facteurs, chiffrement de bout en bout et audits réguliers.
</div>
</div>
</div>
</div>
</div>
<!-- 2. Vert Nature -->
<div class="accordion-card">
<div class="card-title">
<i class="bi bi-2-circle-fill"></i>
<span>Nature & Écologie</span>
</div>
<div class="accordion accordion-custom-2" id="acc2">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc2-1">
<i class="bi bi-tree me-2"></i> Impact environnemental
</button>
</h2>
<div id="acc2-1" class="accordion-collapse collapse show" data-bs-parent="#acc2">
<div class="accordion-body">
Nos data centers utilisent 100% d'énergie renouvelable. Compensation carbone intégrée.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc2-2">
<i class="bi bi-recycle me-2"></i> Économie circulaire
</button>
</h2>
<div id="acc2-2" class="accordion-collapse collapse" data-bs-parent="#acc2">
<div class="accordion-body">
Programme de recyclage des équipements et réduction des déchets électroniques.
</div>
</div>
</div>
</div>
</div>
<!-- 3. Ambre Solaire -->
<div class="accordion-card">
<div class="card-title">
<i class="bi bi-3-circle-fill"></i>
<span>Ambre Énergique</span>
</div>
<div class="accordion accordion-custom-3" id="acc3">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc3-1">
<i class="bi bi-sun me-2"></i> Énergie solaire
</button>
</h2>
<div id="acc3-1" class="accordion-collapse collapse show" data-bs-parent="#acc3">
<div class="accordion-body">
Solutions d'énergie solaire pour particuliers et entreprises. Jusqu'à 70% d'économies.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc3-2">
<i class="bi bi-battery-charging me-2"></i> Stockage
</button>
</h2>
<div id="acc3-2" class="accordion-collapse collapse" data-bs-parent="#acc3">
<div class="accordion-body">
Batteries haute capacité pour une autonomie énergétique complète.
</div>
</div>
</div>
</div>
</div>
<!-- 4. Dark Mode Élégant -->
<div class="accordion-card">
<div class="card-title">
<i class="bi bi-4-circle-fill"></i>
<span>Dark Mode Pro</span>
</div>
<div class="accordion accordion-custom-4" id="acc4">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc4-1">
<i class="bi bi-moon-stars me-2"></i> Mode Nuit
</button>
</h2>
<div id="acc4-1" class="accordion-collapse collapse show" data-bs-parent="#acc4">
<div class="accordion-body">
Interface optimisée pour le travail nocturne. Réduction de la fatigue oculaire.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc4-2">
<i class="bi bi-palette me-2"></i> Thèmes personnalisés
</button>
</h2>
<div id="acc4-2" class="accordion-collapse collapse" data-bs-parent="#acc4">
<div class="accordion-body">
Créez vos propres combinaisons de couleurs et partagez-les avec l'équipe.
</div>
</div>
</div>
</div>
</div>
<!-- 5. Violet Créatif -->
<div class="accordion-card">
<div class="card-title">
<i class="bi bi-5-circle-fill"></i>
<span>Violet Créatif</span>
</div>
<div class="accordion accordion-custom-5" id="acc5">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc5-1">
<i class="bi bi-brush me-2"></i> Design System
</button>
</h2>
<div id="acc5-1" class="accordion-collapse collapse show" data-bs-parent="#acc5">
<div class="accordion-body">
Composants réutilisables et cohérents pour une expérience utilisateur fluide.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc5-2">
<i class="bi bi-grid-3x3 me-2"></i> Bibliothèque
</button>
</h2>
<div id="acc5-2" class="accordion-collapse collapse" data-bs-parent="#acc5">
<div class="accordion-body">
Plus de 500 icônes et illustrations vectorielles personnalisables.
</div>
</div>
</div>
</div>
</div>
<!-- 6. Vert Minimaliste -->
<div class="accordion-card">
<div class="card-title">
<i class="bi bi-6-circle-fill"></i>
<span>Minimal & Épuré</span>
</div>
<div class="accordion accordion-custom-6" id="acc6">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc6-1">
<i class="bi bi-check2-circle me-2"></i> Tâches terminées
</button>
</h2>
<div id="acc6-1" class="accordion-collapse collapse show" data-bs-parent="#acc6">
<div class="accordion-body">
12 tâches complétées cette semaine. Félicitations pour votre productivité !
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc6-2">
<i class="bi bi-hourglass-split me-2"></i> En attente
</button>
</h2>
<div id="acc6-2" class="accordion-collapse collapse" data-bs-parent="#acc6">
<div class="accordion-body">
5 tâches en cours de traitement. Prochaine échéance : demain 14h.
</div>
</div>
</div>
</div>
</div>
<!-- 7. Rose Pastel -->
<div class="accordion-card">
<div class="card-title">
<i class="bi bi-7-circle-fill"></i>
<span>Rose Douceur</span>
</div>
<div class="accordion accordion-custom-7" id="acc7">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc7-1">
<i class="bi bi-heart me-2"></i> Favoris
</button>
</h2>
<div id="acc7-1" class="accordion-collapse collapse show" data-bs-parent="#acc7">
<div class="accordion-body">
Retrouvez tous vos éléments favoris en un seul endroit.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc7-2">
<i class="bi bi-share me-2"></i> Partages récents
</button>
</h2>
<div id="acc7-2" class="accordion-collapse collapse" data-bs-parent="#acc7">
<div class="accordion-body">
Documents partagés avec l'équipe cette semaine.
</div>
</div>
</div>
</div>
</div>
<!-- 8. Rouge Passion -->
<div class="accordion-card">
<div class="card-title">
<i class="bi bi-8-circle-fill"></i>
<span>Rouge Intense</span>
</div>
<div class="accordion accordion-custom-8" id="acc8">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc8-1">
<i class="bi bi-fire me-2"></i> Tendances
</button>
</h2>
<div id="acc8-1" class="accordion-collapse collapse show" data-bs-parent="#acc8">
<div class="accordion-body">
Les sujets les plus discutés cette semaine dans votre domaine.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc8-2">
<i class="bi bi-graph-up-arrow me-2"></i> Statistiques
</button>
</h2>
<div id="acc8-2" class="accordion-collapse collapse" data-bs-parent="#acc8">
<div class="accordion-body">
+45% d'engagement ce mois-ci. Consultez le rapport détaillé.
</div>
</div>
</div>
</div>
</div>
<!-- 9. Bleu Technologie -->
<div class="accordion-card">
<div class="card-title">
<i class="bi bi-9-circle-fill"></i>
<span>Bleu Tech</span>
</div>
<div class="accordion accordion-custom-9" id="acc9">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc9-1">
<i class="bi bi-cpu me-2"></i> Infrastructure
</button>
</h2>
<div id="acc9-1" class="accordion-collapse collapse show" data-bs-parent="#acc9">
<div class="accordion-body">
Serveurs haute performance avec 99.99% de disponibilité garantie.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc9-2">
<i class="bi bi-hdd-stack me-2"></i> Stockage
</button>
</h2>
<div id="acc9-2" class="accordion-collapse collapse" data-bs-parent="#acc9">
<div class="accordion-body">
Stockage SSD illimité avec sauvegarde automatique quotidienne.
</div>
</div>
</div>
</div>
</div>
<!-- 10. Indigo Mystique -->
<div class="accordion-card">
<div class="card-title">
<i class="bi bi-0-circle-fill"></i>
<span>Indigo Profond</span>
</div>
<div class="accordion accordion-custom-10" id="acc10">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc10-1">
<i class="bi bi-magic me-2"></i> Intelligence Artificielle
</button>
</h2>
<div id="acc10-1" class="accordion-collapse collapse show" data-bs-parent="#acc10">
<div class="accordion-body">
Assistants IA personnalisés pour automatiser vos tâches répétitives.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc10-2">
<i class="bi bi-robot me-2"></i> Automatisation
</button>
</h2>
<div id="acc10-2" class="accordion-collapse collapse" data-bs-parent="#acc10">
<div class="accordion-body">
Workflows intelligents pour connecter vos applications préférées.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur