Button Group
Classes Information
| ClassName | Description |
|---|---|
| btn-group | Container element |
| btn-active | Active state |
| btn-group-vertical | Vertical orientation |
| btn-group-horizontal | Horizontal orientation |
| btn-group-scrollable | Prevent buttons break when go to small sizes and add scroll |
| btn-group-rounded | First and last child fully rounded |
Basic Usage
Example Code
html
<div class="btn-group btn-group-scrollable">
<button class="btn">Primary</button>
<button class="btn">Primary</button>
<button class="btn">Primary</button>
<button class="btn">Primary</button>
</divVertical
Example Code
html
<div class="btn-group btn-group-scrollable btn-group-vertical">
<button class="btn">Primary</button>
<button class="btn">Primary</button>
<button class="btn">Primary</button>
<button class="btn">Primary</button>
</div>Rounded
Example Code
html
<div class="btn-group btn-group-scrollable btn-group-rounded">
<button class="btn">Primary</button>
<button class="btn">Primary</button>
<button class="btn btn-active">Primary</button>
<button class="btn">Primary</button>
</div>As Radio
Example Code
html
<div class="btn-group btn-group-scrollable">
<input type="radio" name="options" data-content="1" class="btn" />
<input type="radio" name="options" data-content="2" class="btn" />
<input type="radio" name="options" data-content="3" class="btn" />
<input type="radio" name="options" data-content="4" class="btn" />
</div>