Buttons Group
Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Basic Example
Combine sets of button to wrap a series of buttons with .btn in .btn-group.
Default Buttons
Dim Buttons
Outlined Buttons
Dim & Outlined Buttons
Code Example
<div class="btn-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>
Button Toolbar
Combine sets of button groups into button toolbars for more complex components.
Code Example
<div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-primary">1</button> <button type="button" class="btn btn-primary">2</button> <button type="button" class="btn btn-primary">3</button> <button type="button" class="btn btn-primary">4</button> </div> <div class="btn-group" aria-label="Second group"> <button type="button" class="btn btn-primary">5</button> <button type="button" class="btn btn-primary">6</button> <button type="button" class="btn btn-primary">7</button> </div> <div class="btn-group" aria-label="Third group"> <button type="button" class="btn btn-primary">8</button> </div></div>
Code Example
<div class="btn-toolbar mb-3"> <div class="btn-group"> <button type="button" class="btn btn-primary">1</button> <button type="button" class="btn btn-primary">2</button> <button type="button" class="btn btn-primary">3</button> <button type="button" class="btn btn-primary">4</button> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text" id="btnGroupAddon">@</div> </div> <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"> </div></div><div class="btn-toolbar justify-content-between"> <div class="btn-group"> <button type="button" class="btn btn-primary">1</button> <button type="button" class="btn btn-primary">2</button> <button type="button" class="btn btn-primary">3</button> <button type="button" class="btn btn-primary">4</button> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text" id="btnGroupAddon2">@</div> </div> <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2"> </div></div>
Button Sizing
Just add .btn-group-{sm|lg} to each .btn-group class to control applying button sizing globaly.
Code Example
<div class="btn-group btn-group-lg">...</div><div class="btn-group">...</div><div class="btn-group btn-group-sm">...</div>
