Groupes de boutons Bootstrap 5

Groupe de boutons

Bootstrap 5 vous permet de regrouper une série de boutons dans un groupe de boutons (dans une ligne) :

Utilisez les classes .btn-group de la classe <div> élément pour créer un groupe de boutons :

Exemple

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Essayez-le vous-même

Astuce :Ne pas appliquer la taille des boutons à chaque bouton du groupe, mais utiliser la classe .btn-group-lg Pour les groupes de grands boutons ou pour .btn-group-sm Pour les groupes de petits boutons :

Exemple

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Essayez-le vous-même

Groupe de boutons verticaux

Bootstrap 5 prend également en charge les groupes de boutons verticaux :

Utilisez la classe .btn-group-vertical Créer un groupe de boutons vertical :

Exemple

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Essayez-le vous-même

Groupe de boutons alignés

Par défaut, le groupe de boutons est "inline", et plusieurs groupes de boutons s'affichent côte à côte :

Exemple

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">Geely</button>
  <button type="button" class="btn btn-primary">Great Wall</button>
  <button type="button" class="btn btn-primary">Chery</button>
</div>

Essayez-le vous-même

Groupe de boutons imbriqués et menu déroulant

Groupe de boutons imbriqué, peut créer un menu déroulant (vous apprendrez plus sur les menus déroulants dans les chapitres suivants) :

Exemple

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Xiaomi</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Téléphone</a>
      <a class="dropdown-item" href="#">Tablette</a>
    </div>
  </div>
</div>

Essayez-le vous-même