Skip to Content
BootstrapPartie 4 — Composants essentiels4.4 — List group

4.4 — List group

⏱️ TL;DR — .list-group + .list-group-item produit une liste stylée. Les items peuvent être actionnables (<a>/<button> + list-group-item-action), actifs (active), désactivés (disabled), colorés (list-group-item-success), sans bordures (list-group-flush), horizontaux, ou porter des badges.

🎯 Objectifs

  • Créer des listes statiques et interactives.
  • Colorer et marquer des items (actif, désactivé).
  • Combiner avec badges et flush.

Liste de base

<ul class="list-group">
  <li class="list-group-item">Un</li>
  <li class="list-group-item">Deux</li>
  <li class="list-group-item">Trois</li>
</ul>

Liste interactive (menu)

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Actif</a>
  <a href="#" class="list-group-item list-group-item-action">Normal</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Désactivé</a>
</div>

list-group-item-action ajoute le survol/focus ; active marque l’item courant.

Couleurs contextuelles

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Réussi</li>
  <li class="list-group-item list-group-item-danger">Échoué</li>
</ul>

Avec badges (compteurs)

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Messages
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
</ul>

Flush et horizontal

<!-- sans bordures ni coins : idéal dans une carte -->
<ul class="list-group list-group-flush">…</ul>
 
<!-- items côte à côte -->
<ul class="list-group list-group-horizontal">…</ul>

💡 Pour un dev React — Le list group est parfait pour un menu latéral ou une liste de sélection. Couplé aux onglets JS, il peut piloter l’affichage de panneaux. En React, gérez l’item active par l’état plutôt que par la classe en dur.

✏️ Exercices

  1. Un menu de navigation vertical avec un item actif et un désactivé.

✅ Solution

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Accueil</a>
  <a href="#" class="list-group-item list-group-item-action">Profil</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Bientôt</a>
</div>
  1. Une liste « Inbox » avec un compteur non lus à droite de chaque ligne.

✅ Solution

Utiliser d-flex justify-content-between align-items-center + un badge rounded-pill par item.

🧠 Quiz de révision

1. Quelle classe pour rendre un item cliquable/survolable ?

list-group-item-action.

2. Comment marquer l’item courant ?

active.

3. Quelle classe enlève bordures et coins (utile en carte) ?

list-group-flush.

4. Comment aligner un badge à droite d’un item ?

d-flex justify-content-between align-items-center sur l’item.

5. Comment disposer les items horizontalement ?

list-group-horizontal.

Chapitre suivant : 4.5 — Groupes de boutons, spinners, progress, placeholders

4.3 — Cartes (cards)4.5 — Groupes de boutons, spinners, progress, placeholders