Composants

Groupes de boutons

Un groupe de boutons rassemble plusieurs boutons liés sur une même ligne ou une même colonne. Il sert aux actions apparentées, aux choix exclusifs et aux barres d’outils.

Groupe de base#

Enveloppez les boutons dans btn-group et donnez au conteneur role="group" et un aria-label qui décrit l’ensemble.

<div class="btn-group" role="group" aria-label="Période d'affichage">
  <button type="button" class="btn btn-primary">7 jours</button>
  <button type="button" class="btn btn-primary">30 jours</button>
  <button type="button" class="btn btn-primary">12 mois</button>
</div>

Bouton actif et contour#

Marquez le choix courant avec active et aria-current="true" (ou aria-pressed pour une bascule). Les variantes btn-outline-* se combinent de la même manière.

Toutes Crédits Débits

<div class="btn-group" role="group" aria-label="Affichage des opérations">
  <a href="#" class="btn btn-outline-primary active" aria-current="page">Toutes</a>
  <a href="#" class="btn btn-outline-primary">Crédits</a>
  <a href="#" class="btn btn-outline-primary">Débits</a>
</div>

Cases et radios en boutons#

Associez un input masqué par btn-check à un label.btn : l’état coché devient l’état actif du bouton, sans JavaScript. Le label est lié par for et id.

<div class="btn-group mb-3" role="group" aria-label="Services souhaités (cases à cocher)">
  <input type="checkbox" class="btn-check" id="gb-case-sms" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="gb-case-sms">Alertes SMS</label>
  <input type="checkbox" class="btn-check" id="gb-case-mail" autocomplete="off">
  <label class="btn btn-outline-primary" for="gb-case-mail">Relevé par e-mail</label>
  <input type="checkbox" class="btn-check" id="gb-case-app" autocomplete="off">
  <label class="btn btn-outline-primary" for="gb-case-app">Application</label>
</div>
<div class="btn-group" role="group" aria-label="Fréquence des relevés (choix unique)">
  <input type="radio" class="btn-check" name="gb-frequence" id="gb-radio-mois" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="gb-radio-mois">Mensuel</label>
  <input type="radio" class="btn-check" name="gb-frequence" id="gb-radio-trim" autocomplete="off">
  <label class="btn btn-outline-primary" for="gb-radio-trim">Trimestriel</label>
  <input type="radio" class="btn-check" name="gb-frequence" id="gb-radio-an" autocomplete="off">
  <label class="btn btn-outline-primary" for="gb-radio-an">Annuel</label>
</div>

Tailles#

Ajoutez btn-group-lg ou btn-group-sm au groupe plutôt que de répéter la taille sur chaque bouton.

<div class="btn-group btn-group-lg mb-2" role="group" aria-label="Grand groupe">
  <button type="button" class="btn btn-outline-primary">Gauche</button>
  <button type="button" class="btn btn-outline-primary">Milieu</button>
  <button type="button" class="btn btn-outline-primary">Droite</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="Petit groupe">
  <button type="button" class="btn btn-outline-primary">Gauche</button>
  <button type="button" class="btn btn-outline-primary">Milieu</button>
  <button type="button" class="btn btn-outline-primary">Droite</button>
</div>

Barre d'outils#

btn-toolbar réunit plusieurs groupes. Ajoutez des marges avec me-2 et utilisez justify-content-between pour répartir. Un champ de saisie peut s’y glisser, avec son libellé.

<div class="btn-toolbar" role="toolbar" aria-label="Actions sur les opérations">
  <div class="btn-group me-2" role="group" aria-label="Pages">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Export">
    <button type="button" class="btn btn-outline-secondary">PDF</button>
    <button type="button" class="btn btn-outline-secondary">Excel</button>
  </div>
  <div class="input-group">
    <label class="input-group-text" for="gb-montant">Montant</label>
    <input type="text" class="form-control" id="gb-montant" placeholder="FCFA">
  </div>
</div>

Un btn-group peut contenir un autre groupe, par exemple pour ajouter un menu déroulant (JavaScript requis pour son ouverture).

<div class="btn-group" role="group" aria-label="Actions sur le compte">
  <button type="button" class="btn btn-primary">Virement</button>
  <button type="button" class="btn btn-primary">Dépôt</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Plus</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Relevé d'identité bancaire</a></li>
      <li><a class="dropdown-item" href="#">Attestation de compte</a></li>
    </ul>
  </div>
</div>

Disposition verticale#

Remplacez btn-group par btn-group-vertical pour empiler les boutons. Une colonne de boutons fonctionne aussi avec des cases btn-check.

<div class="btn-group-vertical" role="group" aria-label="Choix du compte">
  <button type="button" class="btn btn-outline-primary">Compte courant</button>
  <button type="button" class="btn btn-outline-primary">Livret d'épargne</button>
  <button type="button" class="btn btn-outline-primary">Compte jeune</button>
</div>

Classes

Classes
Classe	Rôle
`btn-group`	Aligne les boutons en ligne, supprime les espaces entre eux et arrondit seulement les extrémités.
`btn-group-vertical`	Empile les boutons dans une colonne.
`btn-group-lg`, `btn-group-sm`	Taille appliquée à tous les boutons du groupe.
`btn-toolbar`	Réunit plusieurs groupes et champs sur une ligne qui peut passer à la ligne.
`btn-check`	Case ou radio masquée ; le `label` qui suit joue le rôle de bouton.
`dropdown-toggle-split`	Bouton compact d’un menu déroulant « scindé » (voir Menus déroulants).

Personnalisation

Un groupe de boutons n’a pas de variables Sass propres : il reprend celles des boutons ($btn-border-radius, $btn-border-width, $btn-active-box-shadow…, voir Boutons) et des menus déroulants pour les éléments imbriqués.

Pour varier l’apparence, redéfinissez les propriétés --bs-btn-* sur le groupe : elles se transmettent aux boutons qu’il contient.

Bonnes pratiques

À faire

Regroupez des actions de même nature ou des choix d’un même ensemble.
Donnez à chaque groupe un nom avec aria-label ; à une barre d’outils, role="toolbar" et un nom.
Utilisez btn-check pour les choix de formulaire (cases ou radios), et name identique pour un choix exclusif.
Limitez-vous à quelques boutons par groupe pour qu’ils tiennent sur mobile.

À éviter

Ne mélangez pas dans un même groupe des actions sans rapport.
N’utilisez pas des boutons simples pour une vraie sélection exclusive : employez des radios en btn-check.
Ne répartissez pas des boutons de tailles différentes dans un groupe.

Accessibilité

role="group" et aria-label sont indispensables pour annoncer l’ensemble aux lecteurs d’écran.
Avec btn-check, relisez que chaque label est bien lié par for et id : c’est lui qui nomme le choix.
Indiquez l’état avec aria-pressed (bascule) ou aria-current (navigation), pas seulement avec active.
Les boutons du groupe sont atteints un à un à la touche Tab ; les radios se parcourent aux flèches.