Group a series of buttons together on a single line with the button group, and super-power them with javascript. Read the Official Bootstrap Documentation for a full list of instructions and other options.
Group a series of buttons together on a single line with the button group.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">General</button>
<button type="button" class="btn btn-secondary">Privacy</button>
<button type="button" class="btn btn-secondary">Account</button>
</div>Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
<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-secondary">1</button>
...
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">...</div>
<div class="btn-group" role="group" aria-label="Third group"></div>
</div>Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
<div class="btn-group-vertical">...</div>