What are Button Groups in Bootstrap ?
Last Updated :
05 Jun, 2023
"Button Groups" in Bootstrap is a class of name "btn-group" which is used to create a series of buttons in groups (without spaces) vertically or horizontally.
Syntax: This is the basic syntax of the button group class where each button has its own class of "btn".
<div class="btn-group">
<button type="button" class="btn">Click</button>
</div>
Buttons have a default border-radius on the first and last buttons of the group.
Adding Styles on Buttons: Bootstrap allows you to add styles to your buttons using the following classes:
- .btn-default
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-link
Example: In this example, we will create button groups using Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<button type="button" class="btn btn-success">Click</button>
</div>
</body>
</html>
Output:
Sizing of your Buttons: Bootstrap provides 4 button sizes which you can add directly to your buttons by adding an additional class of "btn-group-*" to your "btn-group" class. No need to add separate classes to each button.
All 4 sizes can be used as follows:
Example: In this example, we will size our button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<button type="button" class="btn btn-success">Click</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<button type="button" class="btn btn-success">Click</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<button type="button" class="btn btn-success">Click</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<button type="button" class="btn btn-success">Click</button>
</div>
</body>
</html>
Output:
Vertical Button Groups: Bootstrap also supports vertical button groups stacked in a vertical manner rather than horizontally. Use the class "btn-group-vertical" to create a vertical button group:
Example: In this example, we will create vertical button groups.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="btn-group-vertical">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<button type="button" class="btn btn-success">Click</button>
</div>
</body>
</html>
Output:
Nesting of Buttons: Bootstrap allows you to create dropdown menus under your buttons through nesting. Add a class of "btn-group" within your main "btn-group" class to have a dropdown menu within your button:
Example: In this example, we will create a nested button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<div class="btn-group">
<button type="button"
class="btn btn-success dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Item 1</a></li>
<li><a class="dropdown-item" href="#">Item 2</a></li>
</ul>
</div>
</div>
</body>
</html>
Output:
Similar Reads
Bootstrap 4 | Button Groups
Bootstrap offers classes which allow to group buttons along the same line, horizontally or vertically. The buttons to be grouped are nested inside a <div> element with the class .btn-group. Horizontally arranged button groups: The .btn-group class is used to create horizontally arranged button
4 min read
Bootstrap 5 Button Group Sizing
Bootstrap 5 provides different classes that allow changing button group sizes. Instead of using button sizing classes to every button element in a group, we can just add .btn-group-* class to set the button size in a button group. Button Group Sizing Classes: .btn-group-lg: This class is used to cre
4 min read
Bootstrap 5 Input Group Button Addons
Bootstrap 5 Input Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs. Input Group Button Addons are used to extend form controls by adding buttons or button groups.Bootstrap 5 Input group Button Addons
2 min read
Bootstrap 5 Button group Nesting
Bootstrap 5 Button group nesting is used to create a dropdown menu mixed with a series of buttons. To make the button group nesting, we will use .btn-group class. Button group nesting used Class: .btn-group: This class is used to create a button group nesting in a dropdown menu. Syntax: <div clas
2 min read
Bootstrap 5 List group Links and buttons
Bootstrap 5 provides the List Group Links and Buttons items feature in which items are actionable and stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Links and Buttons items feature is used to indicate the item is current
2 min read
Bootstrap 5 Button group Mixed styles
Bootstrap 5 Button group is a component that helps to combine the buttons in a series in a single line. In button group mixed styles, we can create a button group with different background colors. Button group Mixed styles used Classes: .btn-group: This class is used to group a series of buttons tog
2 min read
Bootstrap 5 Button group Outlined styles
Button group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line. For the Button group outlined style, we will create a div element with class .btn-group and inside the div element, we will create button elements. Bootstrap 5 provides a series of cl
3 min read
What are glyphicons in Bootstrap ?
Bootstrap Glyphicons are a set of small, glyph-based icons that enhance user interfaces. They offer a variety of symbols for common actions and elements, allowing for improved visual representation and functionality in web applications. Applications:Â To understand more effectively and easily in web
2 min read
Bootstrap 5 Input group Segmented Buttons
Bootstrap 5 Input group Segmented buttons used to segment dropdowns in input groups, use the same general style as the dropdown button.Bootstrap 5 Input group Segmented buttons used classes: There is no specific class used to group Segmented buttons. To create a button, we use the .btn class, and to
2 min read
Bootstrap 5 Close button White variant
Bootstrap 5 Close button is used to add more user access and enhance user experience to a website and its components. Generally, the default version of this button is dark/black and it goes universally with all the colors except the dark/black colored background or component which goes well and look
2 min read