Button group
Group a series of buttons together on a single line or stack them in a vertical column.
Wrap a series of buttons with .btn in .btn-group.
Button groups require an appropriate role attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use role="group" for button groups or role="toolbar" for button toolbars. Then use aria-label or aria-labelledby to label them.
These classes can also be added to groups of links, as an alternative to the .nav navigation components.
Mixed styles
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
//navigation components
<div class="btn-group">
<a href="#" class="btn btn-primary active bg-primary-dark" aria-current="page">Active link</a>
<a href="#" class="btn btn-primary text-white">Link</a>
<a href="#" class="btn btn-primary text-white">Link</a>
</div>
//mixed style
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>