Bootstrap 5 | Button group
Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Button group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line. All types of buttons are supported by it.
Syntax:
<div class="btn-group"> Buttons... <div>
Types: Following are the nine types of buttons available in Bootstrap 5:
- btn-primary
- btn-secondary
- btn-success
- btn-danger
- btn-warning
- btn-info
- btn-light
- btn-dark
- btn-link
Horizontally arranged button groups: The .btn-group class is used to create horizontally arranged button groups.
-
Example: This example uses show the working of horizontally arranged button group in Bootstrap 5.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Bootstrap 5 | Buttons group
</
title
>
<!-- Load Bootstrap -->
<
link
rel
=
"stylesheet"
href
=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity
=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin
=
"anonymous"
>
</
head
>
<
body
>
<
div
style="text-align: center;
width: 600px; margin-top:100px;">
<
h1
style
=
"color: green;"
>
w3wiki
</
h1
>
</
div
>
<
div
style="width: 600px;height: 200px;
margin:20px;text-align: center;">
<
div
class
=
"btn-group"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>
Primary</
button
>
<
button
type
=
"button"
class
=
"btn btn-secondary"
>
Secondary</
button
>
<
button
type
=
"button"
class
=
"btn btn-success"
>
Success</
button
>
<
button
type
=
"button"
class
=
"btn btn-danger"
>
Danger</
button
>
</
div
>
<
div
class
=
"btn-group"
style
=
"margin-top: 10px;"
>
<
button
type
=
"button"
class
=
"btn btn-warning"
>
Warning</
button
>
<
button
type
=
"button"
class
=
"btn btn-info"
>
Info</
button
>
<
button
type
=
"button"
class
=
"btn btn-light"
>
Light</
button
>
<
button
type
=
"button"
class
=
"btn btn-dark"
>
Dark</
button
>
<
button
type
=
"button"
class
=
"btn btn-link"
>
Link</
button
>
</
div
>
</
div
>
</
body
>
</
html
>
Output:
- Vertically arranged button groups: The .btn-group-vertical class is used in parent div to create vertical button group.
Example: This example uses show the working of vertical arranged button group in Bootstrap 5.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Bootstrap 5 | Buttons group
</
title
>
<!-- Load Bootstrap -->
<
link
rel
=
"stylesheet"
href
=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity
=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin
=
"anonymous"
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
div
class
=
"container mt-3"
>
<
h1
style
=
"color:green;"
>
w3wiki
</
h1
>
<
div
class
=
"btn-group-vertical"
>
<
button
type
=
"button"
class
=
"btn btn-success"
>
HTML
</
button
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>
CSS
</
button
>
<
button
type
=
"button"
class
=
"btn btn-danger"
>
JavaScript
</
button
>
</
div
>
</
div
>
</
body
>
</
html
>
Output:
- Button group sizing: The whole button group can be given the same size by including the class btn-group-* (* could be sm, md or lg) in the .btn-group parent element, instead of including sizing classes in each button.
Example: This example uses show the working of button sizes with button group in Bootstrap 5.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Bootstrap 5 | Buttons group
</
title
>
<!-- Load Bootstrap -->
<
link
rel
=
"stylesheet"
href
=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity
=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin
=
"anonymous"
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
div
class
=
"container mt-3"
>
<
h1
style
=
"color:green;"
>
w3wiki
</
h1
>
<
div
class
=
"container"
>
<
div
class
=
"btn-group btn-group-lg"
>
<
button
type
=
"button"
class
=
"btn btn-success"
>
HTML
</
button
>
<
button
type
=
"button"
class
=
"btn btn-dark"
>
CSS
</
button
>
<
button
type
=
"button"
class
=
"btn btn-secondary"
>
JavaScript
</
button
>
</
div
>
<
br
><
br
>
<
div
class
=
"btn-group btn-group-md"
>
<
button
type
=
"button"
class
=
"btn btn-success"
>
HTML
</
button
>
<
button
type
=
"button"
class
=
"btn btn-dark"
>
CSS
</
button
>
<
button
type
=
"button"
class
=
"btn btn-secondary"
>
JavaScript
</
button
>
</
div
>
<
br
><
br
>
<
div
class
=
"btn-group btn-group-sm"
>
<
button
type
=
"button"
class
=
"btn btn-success"
>
HTML
</
button
>
<
button
type
=
"button"
class
=
"btn btn-dark"
>
CSS
</
button
>
<
button
type
=
"button"
class
=
"btn btn-secondary"
>
JavaScript
</
button
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
Output:
- Nesting button groups and making dropdown menus: A button group can be nested within another button group and dropdown menus can be created this way.
Single button dropdown:
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Bootstrap 5 | Buttons group
</
title
>
<!-- Load Bootstrap -->
<
link
rel
=
"stylesheet"
href
=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity
=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin
=
"anonymous"
>
<
script
src
=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity
=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity
=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
div
class
=
"container mt-3"
>
<
h1
style
=
"color:green;"
>
w3wiki
</
h1
>
<
div
class
=
"container"
>
<
div
class
=
"btn-group"
>
<
button
type
=
"button"
class
=
"btn btn-success"
>
HTML
</
button
>
<
button
type
=
"button"
class
=
"btn btn-success btn-group"
>
CSS
</
button
>
<
div
class
=
"btn-group"
>
<
div
class
=
"dropdown"
>
<
button
type
=
"button"
class
=
"btn btn-success dropdown-toggle"
data-toggle
=
"dropdown"
>
JavaScript<
span
class
=
"caret"
></
span
>
</
button
>
<
ul
class
=
"dropdown-menu"
role
=
"menu"
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>React</
a
></
li
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>Vue</
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
Output:
- Split button dropdown:
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Bootstrap 5 | Buttons group
</
title
>
<!-- Load Bootstrap -->
<
link
rel
=
"stylesheet"
href
=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity
=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin
=
"anonymous"
>
<
script
src
=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity
=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity
=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
div
class
=
"container mt-3"
>
<
h1
style
=
"color:green;"
>
w3wiki
</
h1
>
<
div
class
=
"container"
>
<
div
class
=
"btn-group"
>
<
button
type
=
"button"
class
=
"btn btn-success"
>
HTML
</
button
>
<
button
type
=
"button"
class
=
"btn btn-primary btn-group"
>
CSS
</
button
>
<
div
class
=
"btn-group"
>
<
button
type
=
"button"
class
=
"btn btn-secondary"
>
JavaScript
</
button
>
<
button
type
=
"button"
class
=
"btn btn-dark dropdown-toggle"
data-toggle
=
"dropdown"
>
<
span
class
=
"caret"
></
span
>
</
button
>
<
ul
class
=
"dropdown-menu"
role
=
"menu"
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
React</
a
></
li
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>
Vue</
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
Output:
- Bootstrap 5 also supports Split Button Vertical Dropdown.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Bootstrap 5 | Buttons group
</
title
>
<!-- Load Bootstrap -->
<
link
rel
=
"stylesheet"
href
=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity
=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin
=
"anonymous"
>
<
script
src
=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity
=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity
=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
div
class
=
"container mt-3"
>
<
h1
style
=
"color:green;"
>
w3wiki
</
h1
>
<
div
class
=
"container"
>
<
div
class
=
"btn-group-vertical"
>
<
button
type
=
"button"
class
=
"btn btn-info"
>
HTML
</
button
>
<
button
type
=
"button"
class
=
"btn btn-danger"
>
CSS
</
button
>
<
div
class
=
"btn-group"
>
<
button
type
=
"button"
class
=
"btn btn-secondary dropdown-toggle"
data-toggle
=
"dropdown"
>
JavaScript
</
button
>
<
ul
class
=
"dropdown-menu"
role
=
"menu"
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>
React</
a
></
li
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>
Vue</
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
Output: