<h1><center>Button Group</center></h1>

Button groups

Bootstrap provides button group functionality , in which we can add multiple buttons together and use them separately. We can also use JavaScript with buttons groups and get more functionalities. we must provide role and label to the button group. In button group role=group.

<div class="btn-group" role="group" aria-label="Example">
  <button class="btn btn-primary" type="button">Java</button>
  <button class="btn btn-primary" type="button">Python</button>
  <button class="btn btn-primary" type="button">C++</button>

Bootstrap Toolbar

In Bootstrap toolbar is a basically collection of more then one button group as a single tool.In the toolbar as well we provide perfect role and label. In toolbar we use role=toolbar.

<div class="btn-group mr-2" role="group" aria-label="First group">
  <button type="button" class="btn btn-secondary">A</button>
  <button type="button" class="btn btn-secondary">B</button>
  <button type="button" class="btn btn-secondary">C</button>
  <button type="button" class="btn btn-secondary">D</button>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">4</button>
  </div>

Sizing

Instead of using preedefine sizeing we can also customize the size according to our requirement by using .btn-group-* class to each button group.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

Nesting

If we want to use .btn-group inside a btn-group and mixed with dropdowns as well then we use nesting of btn-group.

<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>

<div class="btn-group" role="group">
  <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
  <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
    <a class="dropdown-item" href="#">Dropdown link</a>
    <a class="dropdown-item" href="#">Dropdown link</a>
  </div>
</div>

Vertical Appearance

We can set btn-group appearance vertically instead of horizontally appearance.

<div class="btn-group-vertical">
  ...
</div>