Use button groups to join multiple buttons together as one composite component. Just build them with a series of <a> or <button> elements. Button groups can also function as radios and checkboxes (see the Javascript docs for that).
You can also combine sets of button groups into a toolbar for more complex projects.
- -Heads up: CSS for button groups is in a separate file, button-groups.less.
-Using the standard <a class="btn" href="#">...</a> markup, simply add all the buttons you need.
Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.
You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.
Level up one more time by wrapping multiple instances of <div class="btn-group"> with <div class="btn-toolbar">.
Here's how the HTML looks for a standard button group built with anchor tag buttons:
++<div class="btn-group"> + <a class="btn" href="#">1</a> + <a class="btn" href="#">2</a> + <a class="btn" href="#">3</a> +</div> ++
And with a toolbar for multiple groups:
++<div class="btn-toolbar"> + <div class="btn-group"> + ... + </div> +</div> ++
Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.
+ +CSS for button groups is in a separate file, button-groups.less.
+Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.
+Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.
++<div class="btn-group"> + <a class="btn" href="#">Action</a> + <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> + <span class="caret"></span> + </a> + <ul class="dropdown-menu"> + <!-- dropdown menu links --> + </ul> +</div> +