Le Tutoriel de Bootstrap Button Group

Bootstrap Button Group
Button Group vertical
Button Group et Dropdown
Bootstrap Button Toolbar

1. Bootstrap Button Group

Enveloppez une liste de Bootstrap Button (.btn) dans une .btn-group afin de créer un Button Group. La classe .btn-group permet aux .btn de s'aligner étroitement sur une ligne.

<div class="btn-group" role="group" aria-label="Basic example">
   <button type="button" class="btn btn-secondary">Left</button>
   <button type="button" class="btn btn-secondary">Middle</button>
   <button type="button" class="btn btn-secondary">Right</button>
</div>

Pour <div class="btn-group"> vous devriez utiliser les attributs role, aria-label, même si cela n'est pas obligatoire mais ce code est sympa avec des appareils comme Screen Reader.

Observez l'exemple complet de Button Group :

button-group-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Button Group</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4 class="mb-4">Wrap series of .btn(s) in .btn-group</h4>

         <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-secondary">Left</button>
            <button type="button" class="btn btn-secondary">Middle</button>
            <button type="button" class="btn btn-secondary">Right</button>
         </div>

         <h4 class="mt-5 mb-4">Serials of .btn(s)</h4>
         <div>
           <button type="button" class="btn btn-secondary">Left</button>
           <button type="button" class="btn btn-secondary">Middle</button>
           <button type="button" class="btn btn-secondary">Right</button>
         </div>


      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

2. Button Group vertical

Utilisez la classe .btn-group-vertical afin de créer un Button Group vertical.

<div class="btn-group btn-group-vertical" role="group" aria-label="Vertical Button Group">
   <button type="button" class="btn btn-secondary">Top</button>
   <button type="button" class="btn btn-secondary">Middle</button>
   <button type="button" class="btn btn-secondary">Bottom</button>
</div>

3. Button Group et Dropdown

Des Dropdown Menu peuvent participer au Button Group.

Le Tutoriel de Bootstrap Dropdown

button-group-dropdown-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Button Group</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid">
         <h4 class="mb-4">Button Group with Dropdown Menu</h4>
         <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary dropdown-toggle"
               data-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false">
            Sony
            <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu">
               <a class="dropdown-item" href="#">Tablet</a>
               <a class="dropdown-item" href="#">Smart Phone</a>
            </div>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

4. Bootstrap Button Toolbar

Enveloppez (wrap) une liste des .btn-group dans une .btn-toolbar vous aurez une barre d'outil complex. Elle est similaire comme l'illustration ci-dessous :

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group mr-2" role="group" aria-label="Clipboard group">
      <button type="button" class="btn btn-primary">Copy</button>
      <button type="button" class="btn btn-primary">Paste</button>
      <button type="button" class="btn btn-primary">Cut</button>
   </div>
   <div class="btn-group mr-2" role="group" aria-label="Styles group">
      <button type="button" class="btn btn-secondary">Font</button>
      <button type="button" class="btn btn-secondary">Size</button>
   </div>
   <div class="btn-group" role="group" aria-label="Source group">
      <button type="button" class="btn btn-success">Source</button>
   </div>
</div>

.mr-2 (Margin Right 2) est une classe utilitaire de Bootstrap, vous pouvez étudier sur les classes utilitaires dans le Bootstrap dans le lien ci-dessous :
Le Tutoriel de Bootstrap Spacing Utility