1 <div class="bs-docs-section">
2 <h1 id="btn-groups" class="page-header">Button groups</h1>
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>
6 <div class="bs-callout bs-callout-warning" id="callout-btn-group-tooltips">
7 <h4>Tooltips & 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>
11 <div class="bs-callout bs-callout-warning" id="callout-btn-group-accessibility">
12 <h4>Ensure correct <code>role</code> and provide a label</h4>
13 <p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
14 <p>One exception are groups which only contain a single control (for instance the <a href="#btn-groups-justified">justified button groups</a> with <code><button></code> elements) or a dropdown.</p>
15 <p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
18 <h2 id="btn-groups-single">Basic example</h2>
19 <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
20 <div class="bs-example" data-example-id="simple-button-group">
21 <div class="btn-group" role="group" aria-label="Basic example">
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>
28 <div class="btn-group" role="group" aria-label="...">
29 <button type="button" class="btn btn-default">Left</button>
30 <button type="button" class="btn btn-default">Middle</button>
31 <button type="button" class="btn btn-default">Right</button>
35 <h2 id="btn-groups-toolbar">Button toolbar</h2>
36 <p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
37 <div class="bs-example" data-example-id="simple-button-toolbar">
38 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
39 <div class="btn-group" role="group" aria-label="First group">
40 <button type="button" class="btn btn-default">1</button>
41 <button type="button" class="btn btn-default">2</button>
42 <button type="button" class="btn btn-default">3</button>
43 <button type="button" class="btn btn-default">4</button>
45 <div class="btn-group" role="group" aria-label="Second group">
46 <button type="button" class="btn btn-default">5</button>
47 <button type="button" class="btn btn-default">6</button>
48 <button type="button" class="btn btn-default">7</button>
50 <div class="btn-group" role="group" aria-label="Third group">
51 <button type="button" class="btn btn-default">8</button>
56 <div class="btn-toolbar" role="toolbar" aria-label="...">
57 <div class="btn-group" role="group" aria-label="...">...</div>
58 <div class="btn-group" role="group" aria-label="...">...</div>
59 <div class="btn-group" role="group" aria-label="...">...</div>
63 <h2 id="btn-groups-sizing">Sizing</h2>
64 <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including when nesting multiple groups.</p>
65 <div class="bs-example" data-example-id="button-group-sizing">
66 <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
67 <button type="button" class="btn btn-default">Left</button>
68 <button type="button" class="btn btn-default">Middle</button>
69 <button type="button" class="btn btn-default">Right</button>
72 <div class="btn-group" role="group" aria-label="Default button group">
73 <button type="button" class="btn btn-default">Left</button>
74 <button type="button" class="btn btn-default">Middle</button>
75 <button type="button" class="btn btn-default">Right</button>
78 <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
79 <button type="button" class="btn btn-default">Left</button>
80 <button type="button" class="btn btn-default">Middle</button>
81 <button type="button" class="btn btn-default">Right</button>
84 <div class="btn-group btn-group-xs" role="group" aria-label="Extra-small button group">
85 <button type="button" class="btn btn-default">Left</button>
86 <button type="button" class="btn btn-default">Middle</button>
87 <button type="button" class="btn btn-default">Right</button>
91 <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
92 <div class="btn-group" role="group" aria-label="...">...</div>
93 <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
94 <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
97 <h2 id="btn-groups-nested">Nesting</h2>
98 <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>
99 <div class="bs-example" data-example-id="button-group-nesting">
100 <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
101 <button type="button" class="btn btn-default">1</button>
102 <button type="button" class="btn btn-default">2</button>
104 <div class="btn-group" role="group">
105 <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
107 <span class="caret"></span>
109 <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
110 <li><a href="#">Dropdown link</a></li>
111 <li><a href="#">Dropdown link</a></li>
117 <div class="btn-group" role="group" aria-label="...">
118 <button type="button" class="btn btn-default">1</button>
119 <button type="button" class="btn btn-default">2</button>
121 <div class="btn-group" role="group">
122 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
124 <span class="caret"></span>
126 <ul class="dropdown-menu" role="menu">
127 <li><a href="#">Dropdown link</a></li>
128 <li><a href="#">Dropdown link</a></li>
134 <h2 id="btn-groups-vertical">Vertical variation</h2>
135 <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>
136 <div class="bs-example" data-example-id="vertical-button-group">
137 <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
138 <button type="button" class="btn btn-default">Button</button>
139 <button type="button" class="btn btn-default">Button</button>
140 <div class="btn-group" role="group">
141 <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
143 <span class="caret"></span>
145 <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
146 <li><a href="#">Dropdown link</a></li>
147 <li><a href="#">Dropdown link</a></li>
150 <button type="button" class="btn btn-default">Button</button>
151 <button type="button" class="btn btn-default">Button</button>
152 <div class="btn-group" role="group">
153 <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
155 <span class="caret"></span>
157 <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
158 <li><a href="#">Dropdown link</a></li>
159 <li><a href="#">Dropdown link</a></li>
162 <div class="btn-group" role="group">
163 <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
165 <span class="caret"></span>
167 <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
168 <li><a href="#">Dropdown link</a></li>
169 <li><a href="#">Dropdown link</a></li>
172 <div class="btn-group" role="group">
173 <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
175 <span class="caret"></span>
177 <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
178 <li><a href="#">Dropdown link</a></li>
179 <li><a href="#">Dropdown link</a></li>
185 <div class="btn-group-vertical" role="group" aria-label="...">
190 <h2 id="btn-groups-justified">Justified button groups</h2>
191 <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>
193 <div class="bs-callout bs-callout-warning" id="callout-btn-group-justified-dbl-border">
194 <h4>Handling borders</h4>
195 <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>
197 <div class="bs-callout bs-callout-warning" id="callout-btn-group-ie8-border">
198 <h4>IE8 and borders</h4>
199 <p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code><a></code> or <code><button></code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
200 <p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
203 <h4>With <code><a></code> elements</h4>
204 <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
205 <div class="bs-example" data-example-id="simple-justified-button-group">
206 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
207 <a href="#" class="btn btn-default" role="button">Left</a>
208 <a href="#" class="btn btn-default" role="button">Middle</a>
209 <a href="#" class="btn btn-default" role="button">Right</a>
212 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
213 <a href="#" class="btn btn-default" role="button">Left</a>
214 <a href="#" class="btn btn-default" role="button">Middle</a>
215 <div class="btn-group" role="group">
216 <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
217 Dropdown <span class="caret"></span>
219 <ul class="dropdown-menu" role="menu">
220 <li><a href="#">Action</a></li>
221 <li><a href="#">Another action</a></li>
222 <li><a href="#">Something else here</a></li>
223 <li class="divider"></li>
224 <li><a href="#">Separated link</a></li>
230 <div class="btn-group btn-group-justified" role="group" aria-label="...">
235 <div class="bs-callout bs-callout-warning" id="callout-btn-group-anchor-btn">
236 <h4>Links acting as buttons</h4>
237 <p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
240 <h4>With <code><button></code> elements</h4>
241 <p>To use justified button groups with <code><button></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><button></code> elements, but since we support button dropdowns, we can work around that.</p>
242 <div class="bs-example" data-example-id="button-tag-button-group-justified">
243 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
244 <div class="btn-group" role="group">
245 <button type="button" class="btn btn-default">Left</button>
247 <div class="btn-group" role="group">
248 <button type="button" class="btn btn-default">Middle</button>
250 <div class="btn-group" role="group">
251 <button type="button" class="btn btn-default">Right</button>
256 <div class="btn-group btn-group-justified" role="group" aria-label="...">
257 <div class="btn-group" role="group">
258 <button type="button" class="btn btn-default">Left</button>
260 <div class="btn-group" role="group">
261 <button type="button" class="btn btn-default">Middle</button>
263 <div class="btn-group" role="group">
264 <button type="button" class="btn btn-default">Right</button>