Bootstrap Button-Groupwith a variety of options to provide unique looking button groups that match Metronic's design standards.
Wrap a series of buttons with
.btnin
.btn-group.
<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>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-success">Left</button>
<button type="button" class="btn btn-success">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
<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>
Add
.btn-group-*to each
.btn-group, including each one when nesting multiple groups for different sizes.
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
Add
btn-group-verticalto vertically stack buttons.
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-outline-secondary">Button</button>
<button type="button" class="btn btn-outline-secondary">Button</button>
<button type="button" class="btn btn-outline-secondary">Button</button>
</div>
Make a set of buttons appear vertically with a dropdown menu.
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-outline-secondary">Button</button>
<button type="button" class="btn btn-outline-secondary">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
<button type="button" class="btn btn-outline-secondary">Button</button>
<button type="button" class="btn btn-outline-secondary">Button</button>
</div>
Place a
.btn-groupwithin another
.btn-groupwhen you want nested dropdown menus mixed with a series of buttons.
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary font-weight-bold">1</button>
<button type="button" class="btn btn-success font-weight-bold">2</button>
<button type="button" class="btn btn-danger font-weight-bold">3</button>
<button type="button" class="btn btn-warning font-weight-bold">4</button>
<button type="button" class="btn btn-warning font-weight-bold">5</button>
<button type="button" class="btn btn-warning font-weight-bold">6</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-dark font-weight-bold 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>
</div>
Combine sets of button groups into button toolbars for more complex components. Use utility classes to set the appropriate spacing and sizes.
<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>
Use sets of button groups with icons.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group mr-2" role="group" aria-label="...">
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-file-text-o"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-bold"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-paperclip"></i></button>
</div>
<div class="btn-group mr-2" role="group" aria-label="...">
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-floppy-o"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-files-o"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-header"></i></button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-scissors"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-unlink"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-italic"></i></button>
</div>
</div>
Mix input groups with button groups in your toolbars. Use utility classes to set the appropriate spacing and sizes.
<div class="btn-toolbar mb-3" 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-outline-secondary btn-icon"><i class="la la-file-text-o"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-floppy-o"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-header"></i></button>
<button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-italic"></i></button>
</div>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text" id="btnGroupAddon">@</span></div>
<input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon"/>
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-primary btn-icon"><i class="la la-file-text-o"></i></button>
<button type="button" class="btn btn-success btn-icon"><i class="la la-paperclip"></i></button>
<button type="button" class="btn btn-warning btn-icon"><i class="la la-files-o"></i></button>
<button type="button" class="btn btn-info btn-icon"><i class="la la-scissors"></i></button>
</div>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text" id="btnGroupAddon2">@</span></div>
<input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon2"/>
</div>
</div>
