Basic example
Wrap a series of buttons with .btn in .btn-group.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic
example"> <button type="button" class="btn
btn-primary">Left</button> <button type="button" class="btn
btn-primary">Middle</button> <button type="button" class="btn
btn-primary">Right</button> </div>
Button groups require an appropriate role attribute and explicit label to ensure
assistive technologies like screen readers identify buttons as grouped and announce them. Use
role="group" for button groups or role="toolbar" for
button toolbars. Then use aria-label or aria-labelledby to label them.
These classes can also be added to groups of links, as an alternative to the
.nav navigation components
<div class="btn-group">
<a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
<a href="#" class="btn btn-primary">Link</a>
<a href="#" class="btn btn-primary">Link</a>
</div>
<div class="btn-group"> <a href="#" class="btn btn-primary
active" aria-current="page">Active link</a> <a href="#"
class="btn btn-primary">Link</a> <a href="#" class="btn
btn-primary">Link</a> </div>
Mixed styles
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic mixed styles
example"> <button type="button" class="btn
btn-danger">Left</button> <button type="button" class="btn
btn-warning">Middle</button> <button type="button" class="btn
btn-success">Right</button> </div>
Outlined styles
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic outlined
example"> <button type="button" class="btn
btn-outline-primary">Left</button> <button type="button"
class="btn btn-outline-primary">Middle</button> <button
type="button" class="btn btn-outline-primary">Right</button>
</div>
Combine button-like checkbox and radio toggle buttons into a
seamless looking button group.
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<div class="btn-group" role="group" aria-label="Basic checkbox
toggle button group"> <input type="checkbox" class="btn-check"
id="btncheck1" autocomplete="off"> <label class="btn
btn-outline-primary" for="btncheck1">Checkbox 1</label> <input
type="checkbox" class="btn-check" id="btncheck2"
autocomplete="off"> <label class="btn btn-outline-primary"
for="btncheck2">Checkbox 2</label> <input type="checkbox"
class="btn-check" id="btncheck3" autocomplete="off"> <label
class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle
button group"> <input type="radio" class="btn-check"
name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio
1</label> <input type="radio" class="btn-check"
name="btnradio" id="btnradio2" autocomplete="off"> <label
class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio"
id="btnradio3" autocomplete="off"> <label class="btn
btn-outline-primary" for="btnradio3">Radio 3</label> </div>
Combine sets of button groups into button toolbars for more complex components. Use utility classes as
needed to space out groups, buttons, and more.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary">
<i class="ri-arrow-left-line"></i>
</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-secondary">Archive</button>
<button type="button" class="btn btn-outline-secondary">Report</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-outline-secondary">Snooze</button>
<button type="button" class="btn btn-outline-secondary rounded-end" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-line"></i>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
<i class="ri-mail-check-line me-2"></i>Mark as read
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ri-mail-open-line me-2"></i>Mark as unread
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="#">
<i class="ri-folder-2-line me-2"></i>Move to folder
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ri-archive-line me-2"></i>Archive
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ri-time-line me-2"></i>Snooze
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ri-star-line me-2"></i>Star
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item text-danger" href="#">
<i class="ri-delete-bin-6-line me-2"></i>Delete
</a>
</li>
</ul>
</div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with
button groups"> <div class="btn-group me-2" role="group"
aria-label="First group"> <button type="button" class="btn
btn-outline-secondary"> <i class="ri-arrow-left-line"></i>
</button> </div> <div class="btn-group me-2" role="group"
aria-label="Second group"> <button type="button" class="btn
btn-outline-secondary">Archive</button> <button type="button"
class="btn btn-outline-secondary">Report</button> </div> <div
class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn
btn-outline-secondary">Snooze</button> <button type="button"
class="btn btn-outline-secondary rounded-end" data-bs-toggle="dropdown"
aria-expanded="false"> <i class="ri-more-line"></i>
</button> <ul class="dropdown-menu"> <li> <a
class="dropdown-item" href="#"> <i class="ri-mail-check-line
me-2"></i>Mark as read </a> </li> <li> <a
class="dropdown-item" href="#"> <i class="ri-mail-open-line
me-2"></i>Mark as unread </a> </li> <li><hr
class="dropdown-divider"></li> <li> <a
class="dropdown-item" href="#"> <i class="ri-folder-2-line
me-2"></i>Move to folder </a> </li> <li> <a
class="dropdown-item" href="#"> <i class="ri-archive-line
me-2"></i>Archive </a> </li> <li> <a
class="dropdown-item" href="#"> <i class="ri-time-line
me-2"></i>Snooze </a> </li> <li> <a
class="dropdown-item" href="#"> <i class="ri-star-line
me-2"></i>Star </a> </li> <li><hr
class="dropdown-divider"></li> <li> <a class="dropdown-item
text-danger" href="#"> <i class="ri-delete-bin-6-line
me-2"></i>Delete </a> </li> </ul> </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.
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon">@</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-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon2">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar
with button groups"> <div class="btn-group me-2" role="group"
aria-label="First group"> <button type="button" class="btn
btn-outline-secondary">1</button> <button type="button"
class="btn btn-outline-secondary">2</button> <button
type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn
btn-outline-secondary">4</button> </div> <div
class="input-group"> <div class="input-group-text"
id="btnGroupAddon">@</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-outline-secondary">1</button> <button type="button"
class="btn btn-outline-secondary">2</button> <button
type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn
btn-outline-secondary">4</button> </div> <div
class="input-group"> <div class="input-group-text"
id="btnGroupAddon2">@</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.
Left
Middle
Right
Left
Middle
Right
Left
Middle
Right
<div class="btn-group btn-group-sm mb-2" role="group" aria-label="Large button group">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
<button type="button" class="btn btn-outline-secondary">
<i class="ri-add-line"></i>
</button>
</div>
<br>
<div class="btn-group mb-2" role="group" aria-label="Default button group">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
<button type="button" class="btn btn-outline-secondary">
<i class="ri-add-line"></i>
</button>
</div>
<br>
<div class="btn-group btn-group-lg" role="group" aria-label="Small button group">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
<button type="button" class="btn btn-outline-secondary">
<i class="ri-add-line"></i>
</button>
</div>
<div class="btn-group btn-group-sm mb-2" role="group"
aria-label="Large button group"> <button type="button" class="btn
btn-outline-secondary">Left</button> <button type="button"
class="btn btn-outline-secondary">Middle</button> <button
type="button" class="btn btn-outline-secondary">Right</button>
<button type="button" class="btn btn-outline-secondary"> <i
class="ri-add-line"></i> </button> </div> <br> <div
class="btn-group mb-2" role="group" aria-label="Default button
group"> <button type="button" class="btn
btn-outline-secondary">Left</button> <button type="button"
class="btn btn-outline-secondary">Middle</button> <button
type="button" class="btn btn-outline-secondary">Right</button>
<button type="button" class="btn btn-outline-secondary"> <i
class="ri-add-line"></i> </button> </div> <br> <div
class="btn-group btn-group-lg" role="group" aria-label="Small button
group"> <button type="button" class="btn
btn-outline-secondary">Left</button> <button type="button"
class="btn btn-outline-secondary">Middle</button> <button
type="button" class="btn btn-outline-secondary">Right</button>
<button type="button" class="btn btn-outline-secondary"> <i
class="ri-add-line"></i> </button> </div>
Nesting
Place a .btn-group within another .btn-group when you want dropdown menus
mixed with a series of buttons.
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with
nested dropdown"> <button type="button" class="btn
btn-primary">1</button> <button type="button" class="btn
btn-primary">2</button> <div class="btn-group"
role="group"> <button type="button" class="btn btn-primary
dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown </button> <ul class="dropdown-menu"> <li><a
class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown
link</a></li> </ul> </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
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical
button group"> <button type="button" class="btn
btn-primary">Button</button> <button type="button" class="btn
btn-primary">Button</button> <button type="button" class="btn
btn-primary">Button</button> <button type="button" class="btn
btn-primary">Button</button> </div>
Dropdown
Button
Button
Dropdown
Dropdown
Dropdown
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-primary dropdown-toggle w-100" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group dropend" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group dropup" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical
button group"> <div class="btn-group" role="group"> <button
type="button" class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button>
<ul class="dropdown-menu"> <li><a class="dropdown-item"
href="#">Dropdown link</a></li> <li><a
class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </div> <button type="button" class="btn
btn-primary">Button</button> <button type="button" class="btn
btn-primary">Button</button> <div class="btn-group dropstart"
role="group"> <button type="button" class="btn btn-primary
dropdown-toggle w-100" data-bs-toggle="dropdown"
aria-expanded="false"> Dropdown </button> <ul
class="dropdown-menu"> <li><a class="dropdown-item"
href="#">Dropdown link</a></li> <li><a
class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </div> <div class="btn-group dropend" role="group">
<button type="button" class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button>
<ul class="dropdown-menu"> <li><a class="dropdown-item"
href="#">Dropdown link</a></li> <li><a
class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </div> <div class="btn-group dropup" role="group">
<button type="button" class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button>
<ul class="dropdown-menu"> <li><a class="dropdown-item"
href="#">Dropdown link</a></li> <li><a
class="dropdown-item" href="#">Dropdown link</a></li>
</ul> </div> </div>
<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
<label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
<label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
<label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical
radio toggle button group"> <input type="radio" class="btn-check"
name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
<label class="btn btn-outline-danger" for="vbtn-radio1">Radio
1</label> <input type="radio" class="btn-check"
name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
<label class="btn btn-outline-danger" for="vbtn-radio2">Radio
2</label> <input type="radio" class="btn-check"
name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
<label class="btn btn-outline-danger" for="vbtn-radio3">Radio
3</label> </div>