Composants

Groupes de liste

Un groupe de liste présente une série d’éléments cohérents : opérations, documents, options. Chaque élément peut être simple, actif, désactivé, cliquable, coloré ou contenir badges et champs.

Liste de base#

Sur un ul, la classe list-group met en forme les list-group-item.

Virement permanent : loyer
Prélèvement : électricité
Retrait au distributeur
Dépôt d'espèces

<ul class="list-group">
  <li class="list-group-item">Virement permanent : loyer</li>
  <li class="list-group-item">Prélèvement : électricité</li>
  <li class="list-group-item">Retrait au distributeur</li>
  <li class="list-group-item">Dépôt d'espèces</li>
</ul>

États actif et désactivé#

active met en valeur l’élément courant (bleu BDU). Pour un élément désactivé, utilisez disabled et aria-disabled="true".

Compte courant
Livret d'épargne
Compte clôturé

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Compte courant</li>
  <li class="list-group-item">Livret d'épargne</li>
  <li class="list-group-item disabled" aria-disabled="true">Compte clôturé</li>
</ul>

Éléments cliquables#

Utilisez des a ou des button avec list-group-item-action pour obtenir un survol et un focus visibles. Évitez de mélanger des éléments inertes et cliquables dans la même liste.

Relevé de mars Relevé de février Relevé de janvier

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">Relevé de mars</a>
  <a href="#" class="list-group-item list-group-item-action">Relevé de février</a>
  <a href="#" class="list-group-item list-group-item-action">Relevé de janvier</a>
  <button type="button" class="list-group-item list-group-item-action" disabled>Relevé de décembre (archivé)</button>
</div>

Sans bordures extérieures#

list-group-flush retire les bordures extérieures et les angles arrondis : pratique dans une carte ou une zone déjà délimitée.

Pièce d'identité
Justificatif de domicile
Dernier bulletin de salaire

<ul class="list-group list-group-flush border rounded">
  <li class="list-group-item">Pièce d'identité</li>
  <li class="list-group-item">Justificatif de domicile</li>
  <li class="list-group-item">Dernier bulletin de salaire</li>
</ul>

Liste numérotée#

list-group-numbered numérote les éléments avec un compteur CSS. Il s’applique à un ol.

Choisir le montant
Renseigner le bénéficiaire
Confirmer avec le code reçu par SMS

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Choisir le montant</li>
  <li class="list-group-item">Renseigner le bénéficiaire</li>
  <li class="list-group-item">Confirmer avec le code reçu par SMS</li>
</ol>

Disposition horizontale#

list-group-horizontal aligne les éléments en ligne ; list-group-horizontal-sm|md|lg|xl|xxl ne le fait qu’à partir du point de rupture indiqué, la liste restant verticale en dessous.

Solde : 245 300 FCFA
Plafond : 2 000 000 FCFA
Découvert : aucun

Toujours
en ligne

<ul class="list-group list-group-horizontal-md mb-3">
  <li class="list-group-item">Solde : 245 300 FCFA</li>
  <li class="list-group-item">Plafond : 2 000 000 FCFA</li>
  <li class="list-group-item">Découvert : aucun</li>
</ul>
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Toujours</li>
  <li class="list-group-item">en ligne</li>
</ul>

Couleurs contextuelles#

Ajoutez list-group-item-* pour colorer un élément selon son sens. list-group-item-secondary et list-group-item-success ont la même teinte verte dans Cauri. Ajoutez toujours un texte qui précise le statut : la couleur ne suffit pas.

Dossier en cours d'étude
Prêt accordé
Demande refusée
Pièce manquante
Rendez-vous planifié
Brouillon
Dossier archivé

<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Dossier en cours d'étude</li>
  <li class="list-group-item list-group-item-success">Prêt accordé</li>
  <li class="list-group-item list-group-item-danger">Demande refusée</li>
  <li class="list-group-item list-group-item-warning">Pièce manquante</li>
  <li class="list-group-item list-group-item-info">Rendez-vous planifié</li>
  <li class="list-group-item list-group-item-light">Brouillon</li>
  <li class="list-group-item list-group-item-dark">Dossier archivé</li>
</ul>

Badges et contenus riches#

Avec les utilitaires de flexbox, placez un badge à droite d’un élément ou composez un élément à plusieurs lignes.

Virements en attente 3
Prêt personnel
Mensualité de 85 000 FCFA
À jour

Virement reçu

Il y a 3 jours

+ 150 000 FCFA de M. Koné.

Référence 2024-0318

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Virements en attente
    <span class="badge text-bg-primary rounded-pill">3</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Prêt personnel</div>
      Mensualité de 85 000 FCFA
    </div>
    <span class="badge text-bg-success rounded-pill">À jour</span>
  </li>
</ul>
<div class="list-group mt-3">
  <a href="#" class="list-group-item list-group-item-action" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Virement reçu</h5>
      <small class="text-body-secondary">Il y a 3 jours</small>
    </div>
    <p class="mb-1">+ 150 000 FCFA de M. Koné.</p>
    <small class="text-body-secondary">Référence 2024-0318</small>
  </a>
</div>

Cases à cocher et radios#

Placez un form-check-input dans chaque élément avec me-1, et un label lié. Ajoutez stretched-link au label pour que tout l’élément soit cliquable. Voir Cases et radios.

Recevoir mon relevé par e-mail
Activer les alertes SMS

Agence de retrait préférée

Plateau
Cocody

<ul class="list-group mb-3">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="gl-case-1">
    <label class="form-check-label stretched-link" for="gl-case-1">Recevoir mon relevé par e-mail</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="gl-case-2" checked>
    <label class="form-check-label stretched-link" for="gl-case-2">Activer les alertes SMS</label>
  </li>
</ul>
<fieldset>
  <legend class="fs-6">Agence de retrait préférée</legend>
  <ul class="list-group">
    <li class="list-group-item">
      <input class="form-check-input me-1" type="radio" name="gl-agence" value="plateau" id="gl-radio-1" checked>
      <label class="form-check-label stretched-link" for="gl-radio-1">Plateau</label>
    </li>
    <li class="list-group-item">
      <input class="form-check-input me-1" type="radio" name="gl-agence" value="cocody" id="gl-radio-2">
      <label class="form-check-label stretched-link" for="gl-radio-2">Cocody</label>
    </li>
  </ul>
</fieldset>

Classes

Classes
Classe	Rôle
`list-group`	Conteneur (`ul`, `ol` ou `div`).
`list-group-item`	Un élément de la liste.
`list-group-item-action`	Survol, focus et état actif pour les éléments `a` et `button`.
`active`, `disabled`	Élément courant, élément désactivé.
`list-group-flush`	Retire bordures extérieures et angles arrondis.
`list-group-numbered`	Numérote les éléments.
`list-group-horizontal`, `list-group-horizontal-{sm\|md\|lg\|xl\|xxl}`	Disposition en ligne, dès le point de rupture indiqué.
`list-group-item-primary`, `-secondary`, `-success`, `-danger`, `-warning`, `-info`, `-light`, `-dark`	Couleurs contextuelles d’un élément.

Variables Sass

Variables Sass
Variable	Défaut	Rôle
`$list-group-color`	`var(--bs-body-color)`	Couleur du texte.
`$list-group-bg`	`var(--bs-body-bg)`	Fond des éléments.
`$list-group-border-color`	`var(--bs-border-color)`	Couleur des bordures.
`$list-group-border-width`	`var(--bs-border-width)`	Épaisseur des bordures.
`$list-group-border-radius`	`var(--bs-border-radius)`	Arrondi de la liste.
`$list-group-item-padding-y`	`.5rem`	Espacement vertical d’un élément.
`$list-group-item-padding-x`	`1rem`	Espacement horizontal d’un élément.
`$list-group-hover-bg`	`var(--bs-tertiary-bg)`	Fond au survol.
`$list-group-active-color`	`#fff`	Texte de l’élément actif.
`$list-group-active-bg`	`$component-active-bg` (bleu BDU)	Fond de l’élément actif.
`$list-group-active-border-color`	`$list-group-active-bg`	Bordure de l’élément actif.
`$list-group-disabled-color`	`var(--bs-secondary-color)`	Texte d’un élément désactivé.
`$list-group-action-color`	`var(--bs-secondary-color)`	Texte des éléments cliquables.
`$list-group-action-hover-color`	`var(--bs-emphasis-color)`	Texte au survol d’un élément cliquable.
`$list-group-action-active-bg`	`var(--bs-secondary-bg)`	Fond à l’appui sur un élément cliquable.

Personnalisation#

La liste lit des propriétés CSS --bs-list-group-* (couleur, fond, bordures, espacements, états). Redéfinissez-les sur une classe à vous.

// Global : avant l'import de Cauri
$list-group-item-padding-y: 0.75rem;
$list-group-active-bg: #0856A1;
$list-group-border-radius: 0.625rem;

// Local : une liste de documents plus aérée
.liste-documents {
  --bs-list-group-item-padding-y: 1rem;
  --bs-list-group-active-bg: #387A1B;
  --bs-list-group-active-border-color: #387A1B;
}

Bonnes pratiques

À faire

Gardez des éléments de même nature et de longueur comparable.
Utilisez list-group-item-action seulement quand l’élément est cliquable.
Marquez l’élément courant avec active et aria-current="true".
Utilisez ol pour une suite d’étapes ordonnées et ul sinon.

À éviter

N’utilisez pas les couleurs contextuelles comme seul indicateur de statut.
Ne mettez pas plusieurs actions indépendantes dans un même élément cliquable (liens imbriqués).
N’employez pas un groupe de liste pour afficher des données tabulaires : préférez un tableau.

Accessibilité

Une liste sémantique (ul ou ol) est annoncée avec son nombre d’éléments ; gardez cette structure.
Les éléments désactivés portent aria-disabled="true" (et disabled sur un button) ; retirez le focus des liens désactivés avec tabindex="-1".
Chaque case ou radio a un label lié ; stretched-link agrandit seulement la zone de clic.
Les couleurs list-group-item-* sont contrastées ; n’y ajoutez pas une couleur de texte arbitraire.