Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
button-groups.html 11.33 KiB
1 
<div class="bs-docs-section">
2 
  <h1 id="btn-groups" class="page-header">Button groups</h1>
3
4 
  <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
5
6 
  <div class="bs-callout bs-callout-warning">
7 
    <h4>Tooltips &amp; popovers in button groups require special setting</h4>
8 
    <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
9 
  </div>
10
11 
  <h3 id="btn-groups-single">Basic example</h3>
12 
  <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
13 
  <div class="bs-example">
14 
    <div class="btn-group" style="margin: 9px 0 5px;">
15 
      <button type="button" class="btn btn-default">Left</button>
16 
      <button type="button" class="btn btn-default">Middle</button>
17 
      <button type="button" class="btn btn-default">Right</button>
18 
    </div>
19 
  </div>
20 
{% highlight html %}
21 
<div class="btn-group">
22 
  <button type="button" class="btn btn-default">Left</button>
23 
  <button type="button" class="btn btn-default">Middle</button>
24 
  <button type="button" class="btn btn-default">Right</button>
25 
</div>
26 
{% endhighlight %}
27
28 
  <h3 id="btn-groups-toolbar">Button toolbar</h3>
29 
  <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
30 
  <div class="bs-example">
31 
    <div class="btn-toolbar" role="toolbar" style="margin: 0;">
32 
      <div class="btn-group">
33 
        <button type="button" class="btn btn-default">1</button>
34 
        <button type="button" class="btn btn-default">2</button>
35 
        <button type="button" class="btn btn-default">3</button>
36 
        <button type="button" class="btn btn-default">4</button>
37 
      </div>
38 
      <div class="btn-group">
39 
        <button type="button" class="btn btn-default">5</button>
40 
        <button type="button" class="btn btn-default">6</button>
41 
        <button type="button" class="btn btn-default">7</button>
42 
      </div>
43 
      <div class="btn-group">
44 
        <button type="button" class="btn btn-default">8</button>
45 
      </div>
46 
    </div>
47 
  </div>
48 
{% highlight html %}
49 
<div class="btn-toolbar" role="toolbar">
50 
  <div class="btn-group">...</div>
51 
  <div class="btn-group">...</div>
52 
  <div class="btn-group">...</div>
53 
</div>
54 
{% endhighlight %}
55
56 
  <h3 id="btn-groups-sizing">Sizing</h3>
57 
  <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
58 
  <div class="bs-example">
59 
    <div class="btn-toolbar" role="toolbar">
60 
      <div class="btn-group btn-group-lg">
61 
        <button type="button" class="btn btn-default">Left</button>
62 
        <button type="button" class="btn btn-default">Middle</button>
63 
        <button type="button" class="btn btn-default">Right</button>
64 
      </div>
65 
    </div>
66 
    <div class="btn-toolbar" role="toolbar">
67 
      <div class="btn-group">
68 
        <button type="button" class="btn btn-default">Left</button>
69 
        <button type="button" class="btn btn-default">Middle</button>
70 
        <button type="button" class="btn btn-default">Right</button>
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
</div> </div> <div class="btn-toolbar" role="toolbar"> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> <div class="btn-toolbar" role="toolbar"> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> </div> {% highlight html %} <div class="btn-group btn-group-lg">...</div> <div class="btn-group">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div> {% endhighlight %} <h3 id="btn-groups-nested">Nesting</h3> <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p> <div class="bs-example"> <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group"> <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </div> {% highlight html %} <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> {% endhighlight %} <h3 id="btn-groups-vertical">Vertical variation</h3> <p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p> <div class="bs-example"> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> <div class="btn-group"> <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> <div class="btn-group"> <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <div class="btn-group"> <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <div class="btn-group"> <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </div> {% highlight html %} <div class="btn-group-vertical"> ... </div> {% endhighlight %} <h3 id="btn-groups-justified">Justified button groups</h3> <p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p> <div class="bs-callout bs-callout-warning"> <h4>Handling borders</h4> <p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p> </div> <div class="bs-callout bs-callout-warning"> <h4>IE8 and borders</h4> <p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p> <p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p> </div> <h4>With <code>&lt;a&gt;</code> elements</h4> <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p> <div class="bs-example"> <div class="btn-group btn-group-justified"> <a class="btn btn-default" role="button">Left</a> <a class="btn btn-default" role="button">Middle</a> <a class="btn btn-default" role="button">Right</a> </div> <br> <div class="btn-group btn-group-justified">
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
<a class="btn btn-default" role="button">Left</a> <a class="btn btn-default" role="button">Middle</a> <div class="btn-group"> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> {% highlight html %} <div class="btn-group btn-group-justified"> ... </div> {% endhighlight %} <h4>With <code>&lt;button&gt;</code> elements</h4> <p>To use justified button groups with <code>&lt;button&gt;</code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code>&lt;button&gt;</code> elements, but since we support button dropdowns, we can workaround that.</p> <div class="bs-example"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">Middle</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">Right</button> </div> </div> </div> {% highlight html %} <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">Middle</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">Right</button> </div> </div> {% endhighlight %} </div>