Bootstrap 4 | Button Groups
Last Updated :
28 Apr, 2022
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 groups.
Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button Groups</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<div class="btn-group">
<button type="button"
class="btn btn-success">
HTML
</button>
<button type="button"
class="btn btn-success">
CSS
</button>
<button type="button"
class="btn btn-success">
JavaScript
</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:
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button Groups</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<div class="btn-group-vertical">
<button type="button"
class="btn btn-success">
HTML
</button>
<button type="button"
class="btn btn-success">
CSS
</button>
<button type="button"
class="btn btn-success">
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:
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button Groups</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<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-success">
CSS
</button>
<button type="button"
class="btn btn-success">
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-success">
CSS
</button>
<button type="button"
class="btn btn-success">
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-success">
CSS
</button>
<button type="button"
class="btn btn-success">
JavaScript
</button>
</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 lang="en">
<head>
<title>Bootstrap Button Groups</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<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">
<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 href="#">React</a></li>
<li><a href="#">Vue</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
|
Output:
-
Split button dropdown:
Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button Groups</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<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">
<button type="button"
class="btn btn-success">
JavaScript
</button>
<button type="button"
class="btn btn-success dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">React</a></li>
<li><a href="#">Vue</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
|
Output:
However, the split button dropdown does not work as expected when the buttons are nested under .btn-group-vertical class.
Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button Groups</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<div class="btn-group-vertical">
<button type="button"
class="btn btn-success">
HTML
</button>
<button type="button"
class="btn btn-success">
CSS
</button>
<div class="btn-group">
<button type="button"
class="btn btn-success dropdown-toggle"
data-toggle="dropdown">
JavaScript
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">React</a></li>
<li><a href="#">Vue</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...