TL;DR – Bootstrap button groups refer to a number of buttons placed on a single line and wrapped with .btn in .btn-group.
Contents
The Use of Bootstrap Button Group
Bootstrap button groups indicate that a set of buttons belongs to the same group contextually. Classes for styling button groups are Bootstrap btn classes.
Creating Button Toolbars
It is possible to combine Bootstrap buttons to create a button toolbar.
You can organize buttons into toolbars by nesting the group in the <div> element with the .btn-toolbar.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-info">1</button>
<button type="button" class="btn btn-info">2</button>
</div>Sizing
You can manipulate the sizes of buttons in Bootstrap by adding btn-group-lg (for large buttons) or the btn-group-sm (for small buttons).
<div class="btn-group btn-group-lg">
<button class="btn btn-success" type="button">Button</button>
<button class="btn btn-info" type="button">Button</button>
<button class="btn btn-warning" type="button">Button</button>
</div>Connecting Buttons Into a Group
A <div> container with the btn-group Bootstrap class puts separate buttons into a group.
<div class="btn-group">
<button class="btn btn-success" type="button">Button</button>
<button class="btn btn-info" type="button">Button</button>
<button class="btn btn-warning" type="button">Button</button>
</div>Vertical Groups
You can create a group of vertical Bootstrap 4 buttons by adding the -vertical suffix to the .btn-group class name.
<div class="btn-group-vertical">
<button class="btn btn-success" type="button">Button</button>
<button class="btn btn-info" type="button">Button</button>
<button class="btn btn-warning" type="button">Button</button>
</div>Nesting to Create Dropdown Menus
By placing one Bootstrap button group into another (nesting), you can create simple dropdown menus.
The code example below consists of three main buttons. The third button has a dropdown menu with two buttons:
<div class="btn-group">
<button type="button" class="btn btn-danger">Bikes</button>
<button type="button" class="btn btn-danger">Scooters</button>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Cars
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Manual</a>
<a class="dropdown-item" href="#">Automatic</a>
</div>
</div>
</div>To create a split button dropdown, you need to use .dropdown-toggle-split class. It does small changes to the padding to make the dropdown look cleaner.
<div class="btn-group">
<button type="button" class="btn btn-danger">Cars</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Manual</a>
<a class="dropdown-item" href="#">Automatic</a>
</div>
</div>If a vertical Bootstrap button group-based dropdown menu works better for your page design, you can make one as well. See the example below. Again, the third button has a dropdown menu with two options:
<div class="btn-group-vertical">
<button type="button" class="btn btn-danger">Bikes</button>
<button type="button" class="btn btn-danger">Scooters</button>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Cars
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Manual</a>
<a class="dropdown-item" href="#">Automatic</a>
</div>
</div>
</div>Bootstrap Button Group: Useful Tips
- Bootstrap buttons have defined styles than you can find here.
role="group"androle="toolbar"should be added to make sure that screen readers recognize groups of Bootstrap buttons.