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
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>
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>
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>