2015-11-20 00:58:21 +03:00
< div class = "bs-docs-section" >
< h1 id = "btn-groups" class = "page-header" > Button groups< / h1 >
< 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 >
< div class = "bs-callout bs-callout-warning" id = "callout-btn-group-tooltips" >
< h4 > Tooltips & popovers in button groups require special setting< / h4 >
< 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 >
< / div >
< div class = "bs-callout bs-callout-warning" id = "callout-btn-group-accessibility" >
< h4 > Ensure correct < code > role< / code > and provide a label< / h4 >
< 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 >
< 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 >
< 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 >
< / div >
< h2 id = "btn-groups-single" > Basic example< / h2 >
< p > Wrap a series of buttons with < code > .btn< / code > in < code > .btn-group< / code > .< / p >
< div class = "bs-example" data-example-id = "simple-button-group" >
< div class = "btn-group" role = "group" aria-label = "Basic example" >
< 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 >
{% highlight html %}
< div class = "btn-group" role = "group" aria-label = "..." >
< 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 >
{% endhighlight %}
< h2 id = "btn-groups-toolbar" > Button toolbar< / h2 >
< p > Combine sets of < code > < div class="btn-group"> < / code > into a < code > < div class="btn-toolbar"> < / code > for more complex components.< / p >
< div class = "bs-example" data-example-id = "simple-button-toolbar" >
< div class = "btn-toolbar" role = "toolbar" aria-label = "Toolbar with button groups" >
< div class = "btn-group" role = "group" aria-label = "First group" >
< button type = "button" class = "btn btn-default" > 1< / button >
< button type = "button" class = "btn btn-default" > 2< / button >
< button type = "button" class = "btn btn-default" > 3< / button >
< button type = "button" class = "btn btn-default" > 4< / button >
< / div >
< div class = "btn-group" role = "group" aria-label = "Second group" >
< button type = "button" class = "btn btn-default" > 5< / button >
< button type = "button" class = "btn btn-default" > 6< / button >
< button type = "button" class = "btn btn-default" > 7< / button >
< / div >
< div class = "btn-group" role = "group" aria-label = "Third group" >
< button type = "button" class = "btn btn-default" > 8< / button >
< / div >
< / div >
< / div >
{% highlight html %}
< div class = "btn-toolbar" role = "toolbar" aria-label = "..." >
< div class = "btn-group" role = "group" aria-label = "..." > ...< / div >
< div class = "btn-group" role = "group" aria-label = "..." > ...< / div >
< div class = "btn-group" role = "group" aria-label = "..." > ...< / div >
< / div >
{% endhighlight %}
< h2 id = "btn-groups-sizing" > Sizing< / h2 >
< 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 >
< div class = "bs-example" data-example-id = "button-group-sizing" >
< div class = "btn-group btn-group-lg" role = "group" aria-label = "Large button group" >
< 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 >
< br >
< div class = "btn-group" role = "group" aria-label = "Default button group" >
< 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 >
< br >
< div class = "btn-group btn-group-sm" role = "group" aria-label = "Small button group" >
< 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 >
< br >
< div class = "btn-group btn-group-xs" role = "group" aria-label = "Extra-small button group" >
< 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 >
{% highlight html %}
< div class = "btn-group btn-group-lg" role = "group" aria-label = "..." > ...< / div >
< div class = "btn-group" role = "group" aria-label = "..." > ...< / div >
< div class = "btn-group btn-group-sm" role = "group" aria-label = "..." > ...< / div >
< div class = "btn-group btn-group-xs" role = "group" aria-label = "..." > ...< / div >
{% endhighlight %}
< h2 id = "btn-groups-nested" > Nesting< / h2 >
< 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" data-example-id = "button-group-nesting" >
< div class = "btn-group" role = "group" aria-label = "Button group with nested dropdown" >
< button type = "button" class = "btn btn-default" > 1< / button >
< button type = "button" class = "btn btn-default" > 2< / button >
< div class = "btn-group" role = "group" >
< button id = "btnGroupDrop1" type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
Dropdown
< span class = "caret" > < / span >
< / button >
< ul class = "dropdown-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" role = "group" aria-label = "..." >
< button type = "button" class = "btn btn-default" > 1< / button >
< button type = "button" class = "btn btn-default" > 2< / button >
< div class = "btn-group" role = "group" >
< button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
Dropdown
< span class = "caret" > < / span >
< / button >
< ul class = "dropdown-menu" >
< li > < a href = "#" > Dropdown link< / a > < / li >
< li > < a href = "#" > Dropdown link< / a > < / li >
< / ul >
< / div >
< / div >
{% endhighlight %}
< h2 id = "btn-groups-vertical" > Vertical variation< / h2 >
< 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" data-example-id = "vertical-button-group" >
< div class = "btn-group-vertical" role = "group" aria-label = "Vertical button group" >
< button type = "button" class = "btn btn-default" > Button< / button >
< button type = "button" class = "btn btn-default" > Button< / button >
< div class = "btn-group" role = "group" >
< button id = "btnGroupVerticalDrop1" type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
Dropdown
< span class = "caret" > < / span >
< / button >
< ul class = "dropdown-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" role = "group" >
< button id = "btnGroupVerticalDrop2" type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
Dropdown
< span class = "caret" > < / span >
< / button >
< ul class = "dropdown-menu" aria-labelledby = "btnGroupVerticalDrop2" >
< li > < a href = "#" > Dropdown link< / a > < / li >
< li > < a href = "#" > Dropdown link< / a > < / li >
< / ul >
< / div >
< div class = "btn-group" role = "group" >
< button id = "btnGroupVerticalDrop3" type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
Dropdown
< span class = "caret" > < / span >
< / button >
< ul class = "dropdown-menu" aria-labelledby = "btnGroupVerticalDrop3" >
< li > < a href = "#" > Dropdown link< / a > < / li >
< li > < a href = "#" > Dropdown link< / a > < / li >
< / ul >
< / div >
< div class = "btn-group" role = "group" >
< button id = "btnGroupVerticalDrop4" type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
Dropdown
< span class = "caret" > < / span >
< / button >
< ul class = "dropdown-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" role = "group" aria-label = "..." >
...
< / div >
{% endhighlight %}
< h2 id = "btn-groups-justified" > Justified button groups< / h2 >
< 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" id = "callout-btn-group-justified-dbl-border" >
< 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" id = "callout-btn-group-ie8-border" >
< 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 > < a> < / code > or < code > < button> < / code > elements. To get around that, wrap each button in another < code > .btn-group< / code > .< / p >
2015-11-20 02:18:15 +03:00
< p > See < a href = "https://github.com/fezvrasta/bootstrap-material-design/issues/12476" > #12476< / a > for more information.< / p >
2015-11-20 00:58:21 +03:00
< / div >
< h4 > With < code > < a> < / 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" data-example-id = "simple-justified-button-group" >
< div class = "btn-group btn-group-justified" role = "group" aria-label = "Justified button group" >
< a href = "#" class = "btn btn-default" role = "button" > Left< / a >
< a href = "#" class = "btn btn-default" role = "button" > Middle< / a >
< a href = "#" class = "btn btn-default" role = "button" > Right< / a >
< / div >
< br >
< div class = "btn-group btn-group-justified" role = "group" aria-label = "Justified button group with nested dropdown" >
< a href = "#" class = "btn btn-default" role = "button" > Left< / a >
< a href = "#" class = "btn btn-default" role = "button" > Middle< / a >
< div class = "btn-group" role = "group" >
< a href = "#" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false" >
Dropdown < span class = "caret" > < / span >
< / a >
< ul class = "dropdown-menu" >
< li > < a href = "#" > Action< / a > < / li >
< li > < a href = "#" > Another action< / a > < / li >
< li > < a href = "#" > Something else here< / a > < / li >
< li role = "separator" class = "divider" > < / li >
< li > < a href = "#" > Separated link< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
{% highlight html %}
< div class = "btn-group btn-group-justified" role = "group" aria-label = "..." >
...
< / div >
{% endhighlight %}
< div class = "bs-callout bs-callout-warning" id = "callout-btn-group-anchor-btn" >
< h4 > Links acting as buttons< / h4 >
< 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 >
< / div >
< h4 > With < code > < button> < / code > elements< / h4 >
< 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 >
< div class = "bs-example" data-example-id = "button-tag-button-group-justified" >
< div class = "btn-group btn-group-justified" role = "group" aria-label = "Justified button group" >
< div class = "btn-group" role = "group" >
< button type = "button" class = "btn btn-default" > Left< / button >
< / div >
< div class = "btn-group" role = "group" >
< button type = "button" class = "btn btn-default" > Middle< / button >
< / div >
< div class = "btn-group" role = "group" >
< button type = "button" class = "btn btn-default" > Right< / button >
< / div >
< / div >
< / div >
{% highlight html %}
< div class = "btn-group btn-group-justified" role = "group" aria-label = "..." >
< div class = "btn-group" role = "group" >
< button type = "button" class = "btn btn-default" > Left< / button >
< / div >
< div class = "btn-group" role = "group" >
< button type = "button" class = "btn btn-default" > Middle< / button >
< / div >
< div class = "btn-group" role = "group" >
< button type = "button" class = "btn btn-default" > Right< / button >
< / div >
< / div >
{% endhighlight %}
< / div >