Bootstrap 4 groupes de listes

Groupes de liste de base

Le groupe de liste le plus basique est une liste non ordonnée avec des éléments de liste :

• Premier article
• Deuxième article
• Troisième article

Pour créer un groupe de liste de base, utilisez un <ul>élément avec class .list-groupet <li>des éléments avec class .list-group-item:

État actif

• Élément actif
• Deuxième article
• Troisième article

Utilisez la .activeclasse pour mettre en surbrillance l'élément actuel :

Groupe de listes avec éléments liés

Pour créer un groupe de listes avec des éléments liés, utilisez <div>au lieu de <ul> et <a>au lieu de <li>. Ajoutez éventuellement la .list-group-item-actionclasse si vous souhaitez une couleur de fond grise au survol :

Élément désactivé

La .disabledclasse ajoute une couleur de texte plus claire à l'élément désactivé. Et lorsqu'il est utilisé sur des liens, il supprimera l'effet de survol :

Rincer/supprimer les bordures

Utilisez la .list-group-flushclasse pour supprimer certaines bordures et coins arrondis :

Groupes de listes horizontales

Si vous souhaitez que les éléments de la liste s'affichent horizontalement au lieu de verticalement (côte à côte au lieu de se superposer), ajoutez la .list-group-horizontalclasse à.list-group :

Classes contextuelles

Les classes contextuelles peuvent être utilisées pour colorer les éléments de la liste :

• Élément de réussite
• Article secondaire
• Élément d'information
• Élément d'avertissement
• Article dangereux
• Article principal
• Objet sombre
• Article léger

Les classes de coloration des éléments de 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-darket list-group-item-light, :

Lier des éléments avec des classes contextuelles

Groupe de liste avec badges

Combinez .badgedes classes avec des classes utilitaires/assistantes pour ajouter des badges dans le groupe de liste :