Bootstrap 5
Tabs
Bootstrap 5 Design
Template
Html
Integration Tabs
Dashboard
Tabs 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 Tabs 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">
<!-- Police -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background: #f8fafc;
padding: 2rem 1rem;
}
.section-title {
font-weight: 700;
margin: 2.5rem 0 1.5rem 0;
color: #0b1120;
border-left: 6px solid #0d6efd;
padding-left: 1.2rem;
}
.section-title i {
color: #0d6efd;
margin-right: 8px;
}
.tab-card {
background: white;
border-radius: 24px;
box-shadow: 0 10px 30px -8px rgba(0,0,0,0.08);
padding: 1.5rem;
margin-bottom: 2rem;
border: 1px solid rgba(0,0,0,0.03);
}
/* custom nav-tabs styles */
.nav-tabs-custom .nav-link {
border: none;
font-weight: 500;
color: #475569;
padding: 0.75rem 1.2rem;
margin-right: 0.25rem;
border-radius: 40px;
transition: all 0.15s;
}
.nav-tabs-custom .nav-link:hover {
background: #f1f5f9;
color: #0f172a;
}
.nav-tabs-custom .nav-link.active {
background: #0d6efd;
color: white;
font-weight: 600;
box-shadow: 0 6px 12px rgba(13,110,253,0.2);
}
/* vertical pills custom */
.nav-pills-vertical .nav-link {
color: #334155;
font-weight: 500;
padding: 0.8rem 1.2rem;
border-radius: 14px;
margin-bottom: 4px;
}
.nav-pills-vertical .nav-link:hover {
background: #eef2ff;
}
.nav-pills-vertical .nav-link.active {
background: linear-gradient(145deg, #2563eb, #1e40af);
color: white;
box-shadow: 0 6px 12px rgba(37,99,235,0.25);
}
</style>
</head>
<body>
<div class="container-lg">
<div class="d-flex align-items-center gap-3 mb-4">
<h1 class="display-5 fw-bold"><i class="bi bi-window-stack me-2"></i>10 Tabs Bootstrap</h1>
<span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill fs-6">5 horizontal · 5 vertical</span>
</div>
<!-- ========== HORIZONTAL TABS (5 exemples) ========== -->
<h2 class="section-title"><i class="bi bi-arrow-right-circle-fill"></i> Tabs horizontaux</h2>
<!-- 1. Tabs classiques avec underline -->
<div class="tab-card">
<h5 class="fw-semibold mb-3"><i class="bi bi-1-circle-fill text-primary me-2"></i>Classic underline tabs</h5>
<ul class="nav nav-tabs" id="hTab1" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab"><i class="bi bi-house-door me-1"></i> Accueil</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab"><i class="bi bi-person me-1"></i> Profil</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab"><i class="bi bi-envelope me-1"></i> Contact</button>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="home" role="tabpanel">
<p class="text-secondary">Bienvenue dans l'onglet Accueil. Contenu avec underline classique Bootstrap.</p>
</div>
<div class="tab-pane fade" id="profile">Informations du profil utilisateur.</div>
<div class="tab-pane fade" id="contact">Formulaire de contact ou email.</div>
</div>
</div>
<!-- 2. Tabs "pills" arrondis -->
<div class="tab-card">
<h5 class="fw-semibold mb-3"><i class="bi bi-2-circle-fill text-primary me-2"></i>Pills arrondis</h5>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab"><i class="bi bi-grid"></i> Dashboard</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab"><i class="bi bi-people"></i> Équipe</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-settings-tab" data-bs-toggle="pill" data-bs-target="#pills-settings" type="button" role="tab"><i class="bi bi-gear"></i> Réglages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="pills-home">Vue d'ensemble des statistiques.</div>
<div class="tab-pane fade" id="pills-profile">Membres de l'équipe et rôles.</div>
<div class="tab-pane fade" id="pills-settings">Préférences de l'application.</div>
</div>
</div>
<!-- 3. Tabs avec icônes + compteur (badge) -->
<div class="tab-card">
<h5 class="fw-semibold mb-3"><i class="bi bi-3-circle-fill text-primary me-2"></i>Tabs avec badges & icônes</h5>
<ul class="nav nav-tabs" id="badgeTab" role="tablist">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#badge1" type="button"><i class="bi bi-chat"></i> Messages <span class="badge bg-danger ms-1">3</span></button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#badge2" type="button"><i class="bi bi-bell"></i> Notifications <span class="badge bg-warning text-dark ms-1">7</span></button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#badge3" type="button"><i class="bi bi-archive"></i> Archives</button>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="badge1">3 nouveaux messages.</div>
<div class="tab-pane fade" id="badge2">7 notifications en attente.</div>
<div class="tab-pane fade" id="badge3">Archives des anciens messages.</div>
</div>
</div>
<!-- 4. Tabs style "boutons outline" -->
<div class="tab-card">
<h5 class="fw-semibold mb-3"><i class="bi bi-4-circle-fill text-primary me-2"></i>Tabs style outline / segmented</h5>
<ul class="nav nav-pills nav-fill gap-1 p-1 bg-light rounded-4" id="segmentedTab" role="tablist">
<li class="nav-item">
<button class="nav-link active rounded-4" data-bs-toggle="tab" data-bs-target="#seg1"><i class="bi bi-sun"></i> Jour</button>
</li>
<li class="nav-item">
<button class="nav-link rounded-4" data-bs-toggle="tab" data-bs-target="#seg2"><i class="bi bi-moon"></i> Nuit</button>
</li>
<li class="nav-item">
<button class="nav-link rounded-4" data-bs-toggle="tab" data-bs-target="#seg3"><i class="bi bi-cloud-sun"></i> Auto</button>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="seg1">Thème clair activé.</div>
<div class="tab-pane fade" id="seg2">Mode sombre.</div>
<div class="tab-pane fade" id="seg3">Changement automatique selon heure.</div>
</div>
</div>
<!-- 5. Tabs avec icônes uniquement (tooltips) -->
<div class="tab-card">
<h5 class="fw-semibold mb-3"><i class="bi bi-5-circle-fill text-primary me-2"></i>Tabs icônes + tooltips</h5>
<ul class="nav nav-tabs" id="iconTab">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#icon1" data-bs-toggle="tooltip" data-bs-title="Vue calendrier"><i class="bi bi-calendar3 fs-5"></i></button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#icon2" data-bs-toggle="tooltip" data-bs-title="Statistiques"><i class="bi bi-bar-chart fs-5"></i></button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#icon3" data-bs-toggle="tooltip" data-bs-title="Favoris"><i class="bi bi-star fs-5"></i></button>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="icon1">Événements à venir.</div>
<div class="tab-pane fade" id="icon2">Graphiques et données.</div>
<div class="tab-pane fade" id="icon3">Vos éléments favoris.</div>
</div>
</div>
<!-- ========== VERTICAL TABS (5 exemples) ========== -->
<h2 class="section-title mt-5"><i class="bi bi-arrow-down-circle-fill"></i> Tabs verticaux</h2>
<div class="row g-4">
<!-- 6. Vertical gauche classique -->
<div class="col-md-6">
<div class="tab-card h-100">
<h5 class="fw-semibold mb-3"><i class="bi bi-6-circle-fill text-success me-2"></i>Vertical gauche (nav flex-column)</h5>
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" style="min-width: 130px;">
<button class="nav-link active mb-2" data-bs-toggle="pill" data-bs-target="#v1"><i class="bi bi-info-circle me-1"></i> Infos</button>
<button class="nav-link mb-2" data-bs-toggle="pill" data-bs-target="#v2"><i class="bi bi-shield me-1"></i> Sécurité</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#v3"><i class="bi bi-brush me-1"></i> Apparence</button>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="v1">Informations générales du compte.</div>
<div class="tab-pane fade" id="v2">Options de sécurité et 2FA.</div>
<div class="tab-pane fade" id="v3">Thèmes et personnalisation.</div>
</div>
</div>
</div>
</div>
<!-- 7. Vertical droite avec icônes -->
<div class="col-md-6">
<div class="tab-card h-100">
<h5 class="fw-semibold mb-3"><i class="bi bi-7-circle-fill text-success me-2"></i>Vertical droite (flex-row-reverse)</h5>
<div class="d-flex flex-row-reverse align-items-start">
<div class="nav flex-column nav-pills ms-3" style="min-width: 130px;">
<button class="nav-link active mb-2" data-bs-toggle="pill" data-bs-target="#vr1"><i class="bi bi-file-text"></i> Brouillons</button>
<button class="nav-link mb-2" data-bs-toggle="pill" data-bs-target="#vr2"><i class="bi bi-send"></i> Publiés</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#vr3"><i class="bi bi-trash"></i> Corbeille</button>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="vr1">Articles en cours d'écriture.</div>
<div class="tab-pane fade" id="vr2">Contenu publié (12 articles).</div>
<div class="tab-pane fade" id="vr3">Éléments supprimés récemment.</div>
</div>
</div>
</div>
</div>
<!-- 8. Vertical avec list-group style -->
<div class="col-md-6">
<div class="tab-card h-100">
<h5 class="fw-semibold mb-3"><i class="bi bi-8-circle-fill text-success me-2"></i>Vertical style list-group</h5>
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#list-home"><i class="bi bi-house"></i> Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#list-profile"><i class="bi bi-person"></i> Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#list-messages"><i class="bi bi-chat"></i> Messages</a>
</div>
</div>
<div class="col-8">
<div class="tab-content">
<div class="tab-pane fade show active" id="list-home">Contenu principal.</div>
<div class="tab-pane fade" id="list-profile">Modifier le profil.</div>
<div class="tab-pane fade" id="list-messages">Messagerie intégrée.</div>
</div>
</div>
</div>
</div>
</div>
<!-- 9. Vertical pills avec fond -->
<div class="col-md-6">
<div class="tab-card h-100">
<h5 class="fw-semibold mb-3"><i class="bi bi-9-circle-fill text-success me-2"></i>Vertical pills colorées</h5>
<div class="d-flex">
<div class="nav flex-column nav-pills-vertical bg-light p-3 rounded-4 me-3" style="min-width: 140px;">
<button class="nav-link active" data-bs-toggle="pill" data-bs-target="#vp1"><i class="bi bi-trophy"></i> Niveau 1</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#vp2"><i class="bi bi-gem"></i> Niveau 2</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#vp3"><i class="bi bi-star"></i> Premium</button>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="vp1">Fonctionnalités de base.</div>
<div class="tab-pane fade" id="vp2">Avancé avec rapports.</div>
<div class="tab-pane fade" id="vp3">Accès illimité + support prioritaire.</div>
</div>
</div>
</div>
</div>
<!-- 10. Vertical avec icônes + compteur -->
<div class="col-md-12">
<div class="tab-card">
<h5 class="fw-semibold mb-3"><i class="bi bi-0-circle-fill text-success me-2"></i>Vertical large avec badges</h5>
<div class="row">
<div class="col-md-3">
<div class="nav flex-column nav-pills">
<button class="nav-link active d-flex justify-content-between align-items-center mb-1" data-bs-toggle="pill" data-bs-target="#vlarge1">
<span><i class="bi bi-inbox"></i> Boîte de réception</span>
<span class="badge bg-primary rounded-pill">14</span>
</button>
<button class="nav-link d-flex justify-content-between align-items-center mb-1" data-bs-toggle="pill" data-bs-target="#vlarge2">
<span><i class="bi bi-star"></i> Suivis</span>
<span class="badge bg-secondary rounded-pill">5</span>
</button>
<button class="nav-link d-flex justify-content-between align-items-center" data-bs-toggle="pill" data-bs-target="#vlarge3">
<span><i class="bi bi-send"></i> Envoyés</span>
</button>
</div>
</div>
<div class="col-md-9">
<div class="tab-content">
<div class="tab-pane fade show active" id="vlarge1">14 messages non lus.</div>
<div class="tab-pane fade" id="vlarge2">5 conversations suivies.</div>
<div class="tab-pane fade" id="vlarge3">Messages envoyés récemment.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-muted mt-5 text-center small border-top pt-3">
⚡ Bootstrap 5 tabs · 5 horizontaux + 5 verticaux · chaque exemple indépendant
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Activer les tooltips
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur