Bootstrap Button Group Tutorial with Examples

Bootstrap Button Group
Vertical Button Group
Button Group with Dropdown
Bootstrap Button Toolbar

1. Bootstrap Button Group

Wrap a list of Bootstrap Button (.btn) in a .btn-group to create a Button Group. The .btn-group class will make .btn located closely to each other in a row.

<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>

For <div class="btn-group"> you should use the role, aria-label attributes although this is not mandatory, it is a code friendly with the devices like Screen Reader.

See the full example of 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. Vertical Button Group

Use the .btn-group-vertical class to create a verticle Button Group.

<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 with Dropdown

Dropdown Menus can also participate in a Button Group.

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

Wrap a list of .btn-group inside a .btn-toolbar you will have a complex tool bar. It is like the following illustration:

<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) is an utility class of Bootstrap, you can learn about the utility classes in the Bootstrap in the following lesson:
Bootstrap Spacing