Group a series of buttons together on a single line or stack them in a vertical column.
Basic example
Wrap a series of buttons with .btnin .btn-group.
< divclass = " btn-group" role = " group" aria-label = " Basic example" > < buttontype = " button" class = " btn btn-primary" > </ button> < buttontype = " button" class = " btn btn-primary" > </ button> < buttontype = " button" class = " btn btn-primary" > </ button> </ div>
These classes can also be added to groups of links,as an alternative to the .navnavigation components.
< divclass = " btn-group" > < ahref = " #" class = " btn btn-primary active" aria-current = " page" > </ a> < ahref = " #" class = " btn btn-primary" > </ a> < ahref = " #" class = " btn btn-primary" > </ a> </ div>
Mixed styles
< divclass = " btn-group" role = " group" aria-label = " Basic mixed styles example" > < buttontype = " button" class = " btn btn-danger" > </ button> < buttontype = " button" class = " btn btn-warning" > </ button> < buttontype = " button" class = " btn btn-success" > </ button> </ div>
Outlined styles
< divclass = " btn-group" role = " group" aria-label = " Basic outlined example" > < buttontype = " button" class = " btn btn-outline-primary" > </ button> < buttontype = " button" class = " btn btn-outline-primary" > </ button> < buttontype = " button" class = " btn btn-outline-primary" > </ button> </ div>
Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
< divclass = " btn-group" role = " group" aria-label = " Basic checkbox toggle button group" > < inputtype = " checkbox" class = " btn-check" id = " btncheck1" autocomplete = " off" > < labelclass = " btn btn-outline-primary" for = " btncheck1" > </ label> < inputtype = " checkbox" class = " btn-check" id = " btncheck2" autocomplete = " off" > < labelclass = " btn btn-outline-primary" for = " btncheck2" > </ label> < inputtype = " checkbox" class = " btn-check" id = " btncheck3" autocomplete = " off" > < labelclass = " btn btn-outline-primary" for = " btncheck3" > </ label> </ div>
< divclass = " btn-group" role = " group" aria-label = " Basic radio toggle button group" > < inputtype = " radio" class = " btn-check" name = " btnradio" id = " btnradio1" autocomplete = " off" checked > < labelclass = " btn btn-outline-primary" for = " btnradio1" > </ label> < inputtype = " radio" class = " btn-check" name = " btnradio" id = " btnradio2" autocomplete = " off" > < labelclass = " btn btn-outline-primary" for = " btnradio2" > </ label> < inputtype = " radio" class = " btn-check" name = " btnradio" id = " btnradio3" autocomplete = " off" > < labelclass = " btn btn-outline-primary" for = " btnradio3" > </ 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.
< divclass = " btn-toolbar" role = " toolbar" aria-label = " Toolbar with button groups" > < divclass = " btn-group me-2" role = " group" aria-label = " First group" > < buttontype = " button" class = " btn btn-primary" > </ button> < buttontype = " button" class = " btn btn-primary" > </ button> < buttontype = " button" class = " btn btn-primary" > </ button> < buttontype = " button" class = " btn btn-primary" > </ button> </ div> < divclass = " btn-group me-2" role = " group" aria-label = " Second group" > < buttontype = " button" class = " btn btn-secondary" > </ button> < buttontype = " button" class = " btn btn-secondary" > </ button> < buttontype = " button" class = " btn btn-secondary" > </ button> </ div> < divclass = " btn-group" role = " group" aria-label = " Third group" > < buttontype = " button" class = " btn btn-info" > </ 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.
< divclass = " btn-toolbar mb-3" role = " toolbar" aria-label = " Toolbar with button groups" > < divclass = " btn-group me-2" role = " group" aria-label = " First group" > < buttontype = " button" class = " btn btn-outline-secondary" > </ button> < buttontype = " button" class = " btn btn-outline-secondary" > </ button> < buttontype = " button" class = " btn btn-outline-secondary" > </ button> < buttontype = " button" class = " btn btn-outline-secondary" > </ button> </ div> < divclass = " input-group" > < divclass = " input-group-text" id = " btnGroupAddon" > </ div> < inputtype = " text" class = " form-control" placeholder = " Input group example" aria-label = " Input group example" aria-describedby = " btnGroupAddon" > </ div> </ div> < divclass = " btn-toolbar justify-content-between" role = " toolbar" aria-label = " Toolbar with button groups" > < divclass = " btn-group" role = " group" aria-label = " First group" > < buttontype = " button" class = " btn btn-outline-secondary" > </ button> < buttontype = " button" class = " btn btn-outline-secondary" > </ button> < buttontype = " button" class = " btn btn-outline-secondary" > </ button> < buttontype = " button" class = " btn btn-outline-secondary" > </ button> </ div> < divclass = " input-group" > < divclass = " input-group-text" id = " btnGroupAddon2" > </ div> < inputtype = " 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
< divclass = " btn-group btn-group-lg" role = " group" aria-label = " Large button group" > < buttontype = " button" class = " btn btn-outline-dark" > </ button> < buttontype = " button" class = " btn btn-outline-dark" > </ button> < buttontype = " button" class = " btn btn-outline-dark" > </ button> </ div> < divclass = " btn-group" role = " group" aria-label = " Default button group" > < buttontype = " button" class = " btn btn-outline-dark" > </ button> < buttontype = " button" class = " btn btn-outline-dark" > </ button> < buttontype = " button" class = " btn btn-outline-dark" > </ button> </ div> < divclass = " btn-group btn-group-sm" role = " group" aria-label = " Small button group" > < buttontype = " button" class = " btn btn-outline-dark" > </ button> < buttontype = " button" class = " btn btn-outline-dark" > </ button> < buttontype = " button" class = " btn btn-outline-dark" > </ button> </ div>
Nesting
Place a .btn-groupwithin another .btn-groupwhen you want dropdown menus mixed with a series of buttons.
< divclass = " btn-group" role = " group" aria-label = " Button group with nested dropdown" > < buttontype = " button" class = " btn btn-primary" > </ button> < buttontype = " button" class = " btn btn-primary" > </ button> < divclass = " btn-group" role = " group" > < buttonid = " btnGroupDrop1" type = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" aria-expanded = " false" > </ button> < ulclass = " dropdown-menu" aria-labelledby = " btnGroupDrop1" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ 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 Button Button
< divclass = " btn-group-vertical" role = " group" aria-label = " Vertical button group" > < buttontype = " button" class = " btn btn-dark" > </ button> < buttontype = " button" class = " btn btn-dark" > </ button> < buttontype = " button" class = " btn btn-dark" > </ button> < buttontype = " button" class = " btn btn-dark" > </ button> < buttontype = " button" class = " btn btn-dark" > </ button> < buttontype = " button" class = " btn btn-dark" > </ button> </ div>
Button Button
Dropdown
Button Button
Dropdown
Dropdown
Dropdown
< divclass = " btn-group-vertical" role = " group" aria-label = " Vertical button group" > < buttontype = " button" class = " btn btn-primary" > </ button> < buttontype = " button" class = " btn btn-primary" > </ button> < divclass = " btn-group" role = " group" > < buttonid = " btnGroupVerticalDrop1" type = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" aria-expanded = " false" > </ button> < ulclass = " dropdown-menu" aria-labelledby = " btnGroupVerticalDrop1" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> < buttontype = " button" class = " btn btn-primary" > </ button> < buttontype = " button" class = " btn btn-primary" > </ button> < divclass = " btn-group" role = " group" > < buttonid = " btnGroupVerticalDrop2" type = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" aria-expanded = " false" > </ button> < ulclass = " dropdown-menu" aria-labelledby = " btnGroupVerticalDrop2" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> < divclass = " btn-group" role = " group" > < buttonid = " btnGroupVerticalDrop3" type = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" aria-expanded = " false" > </ button> < ulclass = " dropdown-menu" aria-labelledby = " btnGroupVerticalDrop3" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> < divclass = " btn-group" role = " group" > < buttonid = " btnGroupVerticalDrop4" type = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" aria-expanded = " false" > </ button> < ulclass = " dropdown-menu" aria-labelledby = " btnGroupVerticalDrop4" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> </ div>
< divclass = " btn-group-vertical" role = " group" aria-label = " Vertical radio toggle button group" > < inputtype = " radio" class = " btn-check" name = " vbtn-radio" id = " vbtn-radio1" autocomplete = " off" checked = " " > < labelclass = " btn btn-outline-danger" for = " vbtn-radio1" > </ label> < inputtype = " radio" class = " btn-check" name = " vbtn-radio" id = " vbtn-radio2" autocomplete = " off" > < labelclass = " btn btn-outline-danger" for = " vbtn-radio2" > </ label> < inputtype = " radio" class = " btn-check" name = " vbtn-radio" id = " vbtn-radio3" autocomplete = " off" > < labelclass = " btn btn-outline-danger" for = " vbtn-radio3" > </ label> </ div>
