Groupes de listes Bootstrap 5

Liste de groupes de base

La liste de groupes de base est une liste non ordonnée contenant des éléments de liste :

Pour créer une liste de groupes de base, utilisez la classe .list-group de <ul> Élément et classe de .list-group-item de <li> Élément :

Exemple

<ul class="list-group">
  <li class="list-group-item">Premier élément</li>
  <li class="list-group-item">Deuxième élément</li>
  <li class="list-group-item">Troisième élément</li>
</ul>

Essayez-le vous-même

État actif

Utilisez .active Pour mettre en évidence l'élément courant :

Exemple

<ul class="list-group">
  <li class="list-group-item active">Projet actif</li>
  <li class="list-group-item">Deuxième élément</li>
  <li class="list-group-item">Troisième élément</li>
</ul>

Essayez-le vous-même

Liste de groupes contenant des éléments de lien

Pour créer une liste de groupes avec des éléments de lien, utilisez <div> à la place de <ul>en utilisant <a> à la place de <li>Optionnellement, si vous souhaitez un fond gris au survol, ajoutez .list-group-item-action Type :

Exemple

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Premier élément</a>
  <a href="#" class="list-group-item list-group-item-action">Deuxième élément</a>
  <a href="#" class="list-group-item list-group-item-action">Troisième élément</a>
</div>

Essayez-le vous-même

Élément désactivé

.disabled La classe ajoute une couleur de texte plus claire aux éléments désactivés. Lorsqu'elle est utilisée sur un lien, l'effet de survol est supprimé :

Exemple

<div class="list-group">
  <a href="#" class="list-group-item disabled">Projet désactivé</a>
  <a href="#" class="list-group-item disabled">Projet désactivé</a>
  <a href="#" class="list-group-item">Troisième élément</a>
</div>

Essayez-le vous-même

Supprimer les bordures

Utiliser .list-group-flush La classe supprime les bordures et les arrondis :

Exemple

<ul class="list-group list-group-flush">
  <li class="list-group-item">Premier élément</li>
  <li class="list-group-item">Deuxième élément</li>
  <li class="list-group-item">Troisième élément</li>
  <li class="list-group-item">Quatrième élément</li>
</ul>

Essayez-le vous-même

Groupe de liste numéroté

Utiliser .list-group-numbered La classe crée des éléments de liste numérotés en avant :

Exemple

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Premier élément</li>
  <li class="list-group-item">Deuxième élément</li>
  <li class="list-group-item">Troisième élément</li>
</ol>

Essayez-le vous-même

Groupe de liste horizontal

Si vous souhaitez que les éléments de la liste s'affichent horizontalement plutôt que verticalement (côte à côte plutôt que empilés), ajoutez .list-group-horizontal Ajouter la classe à .list-group:

Exemple

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Premier élément</li>
  <li class="list-group-item">Deuxième élément</li>
  <li class="list-group-item">Troisième élément</li>
  <li class="list-group-item">Quatrième élément</li>
</ul>

Essayez-le vous-même

Classes de contexte

Les classes de contexte peuvent être utilisées pour ajouter de la couleur aux éléments de la liste :

Les classes pour colorer les éléments de la liste sont :

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

Exemple

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Élément réussi</li>
  <li class="list-group-item list-group-item-secondary">Élément secondaire</li>
  <li class="list-group-item list-group-item-info">Élément d'information</li>
  <li class="list-group-item list-group-item-warning">Élément d'avertissement</li>
  <li class="list-group-item list-group-item-danger">Élément dangereux</li>
  <li class="list-group-item list-group-item-primary">Élément primaire</li>
  <li class="list-group-item list-group-item-dark">Élément sombre</li>
  <li class="list-group-item list-group-item-light">Élément clair</li>
</ul>

Essayez-le vous-même

Élément de lien avec contexte de classe

Exemple

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Élément d'action</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Élément réussi</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Élément secondaire</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Element d'information</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Avertissement</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Élément dangereux</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Élément principal</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Élément sombre</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Élément clair</a>
</div>

Essayez-le vous-même

Groupe de liste avec badge

Mettre .badge En combinant les classes de type et utility/helper, vous pouvez ajouter des badges dans les groupes de liste :

Exemple

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Boîte de réception
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Courriels publicitaires
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Corbeille
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Essayez-le vous-même