<h1>Button groups<small>Join buttons for more toolbar-like functionality</small></h1>
<h1>Button groups</h1>
</div>
</div>
<h2>Examples</h2>
<h2>Description and best practices</h2>
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements. We recommend the following guidelines for using button groups and toolbars:</p>
<ul>
<li>Always use the same element in a single button group, <code><a></code> or <code><button></code>.</li>
<li>Don't mix buttons of different colors in the same button group.</li>
<li>Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.</li>
</ul>
<p><spanclass="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.</p>
<hrclass="bs-docs-separator">
<h2>Examples and variations</h2>
<p>Two basic options, along with two more specific variations.</p>
<p>Two basic options, along with two more specific variations.</p>
<h3>Basic button group</h3>
<h3>Single button group</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<divclass="btn-group"style="margin: 9px 0 5px;">
<divclass="btn-group"style="margin: 9px 0 5px;">
...
@@ -251,7 +237,7 @@
...
@@ -251,7 +237,7 @@
</div>
</div>
</pre>
</pre>
<h3>Toolbar example</h3>
<h3>Multiple button groups</h3>
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<divclass="btn-toolbar"style="margin: 0;">
<divclass="btn-toolbar"style="margin: 0;">
...
@@ -279,11 +265,7 @@
...
@@ -279,11 +265,7 @@
</div>
</div>
</pre>
</pre>
<h3>Vertical button groups</h3>
<hrclass="bs-docs-separator">
<h2>Vertical button groups</h2>
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<divclass="btn-group btn-group-vertical">
<divclass="btn-group btn-group-vertical">
...
@@ -303,10 +285,10 @@
...
@@ -303,10 +285,10 @@
<hrclass="bs-docs-separator">
<hrclass="bs-docs-separator">
<h3>Checkbox and radio flavors</h3>
<h4>Checkbox and radio flavors</h4>
<p>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 <ahref="./javascript.html#buttons">the Javascript docs</a> for that.</p>
<p>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 <ahref="./javascript.html#buttons">the Javascript docs</a> for that.</p>
<h3>Dropdowns in button groups</h3>
<h4>Dropdowns in button groups</h4>
<p><spanclass="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
<p><spanclass="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
<h1>{{_i}}Button groups{{/i}}<small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
<h1>{{_i}}Button groups{{/i}}</h1>
</div>
</div>
<h2>{{_i}}Examples{{/i}}</h2>
<h2>{{_i}}Description and best practices{{/i}}</h2>
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements. We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
<ul>
<li>{{_i}}Always use the same element in a single button group, <code><a></code> or <code><button></code>.{{/i}}</li>
<li>{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}</li>
<li>{{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}</li>
</ul>
<p>{{_i}}<spanclass="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}</p>
<hrclass="bs-docs-separator">
<h2>{{_i}}Examples and variations{{/i}}</h2>
<p>{{_i}}Two basic options, along with two more specific variations.{{/i}}</p>
<p>{{_i}}Two basic options, along with two more specific variations.{{/i}}</p>
<h3>{{_i}}Basic button group{{/i}}</h3>
<h3>{{_i}}Single button group{{/i}}</h3>
<p>{{_i}}Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.{{/i}}</p>
<p>{{_i}}Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.{{/i}}</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<divclass="btn-group"style="margin: 9px 0 5px;">
<divclass="btn-group"style="margin: 9px 0 5px;">
...
@@ -181,7 +167,7 @@
...
@@ -181,7 +167,7 @@
</div>
</div>
</pre>
</pre>
<h3>{{_i}}Toolbar example{{/i}}</h3>
<h3>{{_i}}Multiple button groups{{/i}}</h3>
<p>{{_i}}Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.{{/i}}</p>
<p>{{_i}}Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.{{/i}}</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<divclass="btn-toolbar"style="margin: 0;">
<divclass="btn-toolbar"style="margin: 0;">
...
@@ -209,11 +195,7 @@
...
@@ -209,11 +195,7 @@
</div>
</div>
</pre>
</pre>
<h3>{{_i}}Vertical button groups{{/i}}</h3>
<hrclass="bs-docs-separator">
<h2>{{_i}}Vertical button groups{{/i}}</h2>
<p>{{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}</p>
<p>{{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<divclass="btn-group btn-group-vertical">
<divclass="btn-group btn-group-vertical">
...
@@ -233,10 +215,10 @@
...
@@ -233,10 +215,10 @@
<hrclass="bs-docs-separator">
<hrclass="bs-docs-separator">
<h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
<h4>{{_i}}Checkbox and radio flavors{{/i}}</h4>
<p>{{_i}}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 <ahref="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
<p>{{_i}}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 <ahref="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
<h3>{{_i}}Dropdowns in button groups{{/i}}</h3>
<h4>{{_i}}Dropdowns in button groups{{/i}}</h4>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
