25/4/2020 Button group · Bootstrap

Button group
Search...
Group a series of buttons together on a single line with the button group,
and super-power them with JavaScript.
Getting started

Layout
Limited time offer: Get 10
Content free Adobe Stock images.

ads via Carbon

Components
Alerts

Badge

Breadcrumb

Buttons Basic example

Button group Wrap a series of buttons with .btn in .btn-group. Add on optional JavaScript radio and checkbox style
Card behavior with our buttons plugin.
Carousel

Collapse
Left Middle Right
Dropdowns

Forms

Input group Copy

<div class="btn-group" role="group" aria-label="Basic example">
Jumbotron <button type="button" class="btn btn-secondary">Left</button>
List group <button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
Media object
</div>
Modal

Navs

Navbar
Ensure correct role and provide a label
Pagination
In order for assistive technologies (such as screen readers) to convey that a series of buttons is
Popovers
grouped, an appropriate role attribute needs to be provided. For button groups, this would be
Progress
role="group", while toolbars should have a role="toolbar".
Scrollspy
In addition, groups and toolbars should be given an explicit label, as most assistive
Spinners
technologies will otherwise not announce them, despite the presence of the correct role
Toasts
attribute. In the examples provided here, we use aria-label, but alternatives such as aria-
Tooltips labelledby can also be used.

Utilities

Extend
Migration Button toolbar
About Combine sets of button groups into button toolbars for more complex components. Use utility classes
as needed to space out groups, buttons, and more.

1 2 3 4 5 6 7 8

Copy

https://getbootstrap.com/docs/4.4/components/button-group/ 1/4
25/4/2020 Button group · Bootstrap

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">

<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>

Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll
likely need some utilities though to space things properly.

1 2 3 4 @ Input group example

1 2 3 4 @ Input group example

Copy
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-
label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar

with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-
label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>

Sizing
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each
.btn-group, including each one when nesting multiple groups.

https://getbootstrap.com/docs/4.4/components/button-group/ 2/4
25/4/2020 Button group · Bootstrap

Left Middle Right

Left Middle Right

Left Middle Right

Copy
<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>

Nesting
Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of
buttons.

1 2 Dropdown

Copy
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>

<div class="btn-group" role="group">

<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>

Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are
not supported here.

Button

Button

Button

Button

Button

Button

https://getbootstrap.com/docs/4.4/components/button-group/ 3/4
25/4/2020 Button group · Bootstrap

Button

Button

Dropdown

Button

Button

Dropdown

Dropdown

Dropdown

Copy
<div class="btn-group-vertical">
...
</div>

https://getbootstrap.com/docs/4.4/components/button-group/ 4/4