Bootstrap Button-Groupwith a variety of options to provide unique looking button groups that match Keen'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>
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
