Button Groups

Group multiple buttons in a single line by adding the class .btn-group

Pagination, button groups, and forms are very similar in style, so they all inherit a lot of the same classes. You'll find we combined these two elements into one less file called btn-group_pagination. You may run into some styling also nested inside of the less file forms


Basic Button Group

Button groups are essentially just a group of btn's

EXAMPLE

<div class="btn-group">
 <button class="btn btn-default">Button One</button>
 <button class="btn btn-default">Button Two</button>
 <button class="btn btn-default">Button Three</button>
</div>

Button Group With Modifiers

Add btn modifiers to get different results. Refer to the button docs for what classes and styles you can use.

EXAMPLE

<div class="btn-group">
 <button class="btn btn-primary">Button One</button>
 <button class="btn btn-primary">Button Two</button>
 <button class="btn btn-primary">Button Three</button>
</div>
<div class="btn-group">
 <button class="btn btn-danger-gradient">Button One</button>
 <button class="btn btn-danger-gradient">Button Two</button>
 <button class="btn btn-danger-gradient">Button Three</button>
</div>

Button Group Sizes

Add -lg and -sm at the end of btn-group for large and small, respectively, for larger and smaller button groups

EXAMPLE

<div class="btn-group">
 <button class="btn btn-default">Button One</button>
 <button class="btn btn-default">Button Two</button>
 <button class="btn btn-default">Button Three</button>
</div>