Bootstrap 5 | Button group
Last Updated :
29 Jul, 2020
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.
HTML
<!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;">
GeeksforGeeks
</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.
HTML
<!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;">
GeeksforGeeks
</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.
HTML
<!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;">
GeeksforGeeks
</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:
HTML
<!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/[email protected]/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;">
GeeksforGeeks
</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:
HTML
<!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/[email protected]/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;">
GeeksforGeeks
</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:
HTML
<!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/[email protected]/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;">
GeeksforGeeks
</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:
