Menu
Bootstrap 5 Button Groups
Button Groups
Bootstrap 5 allows you to group a series of buttons together (on a single line) in a button group:
Use a <div> element with class .btn-group to create a button group:
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Button Group</h2>
<p>The .btn-group class creates a button group:</p>
<div>
<button type=”button”>Apple</button>
<button type=”button”>Samsung</button>
<button type=”button”>Sony</button>
</div>
</div>
</body>
</html>
Tip: Instead of applying button sizes to every button in a group, use class .btn-group-lg for a large button group or the .btn-group-sm for a small button group:
Large Buttons:
Default Buttons:
Small Buttons:
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Button Groups Sizes</h2>
<p>Add class .btn-group-* to size all buttons in a button group.</p>
<h3>Large Buttons:</h3>
<div>
<button type=”button”>Apple</button>
<button type=”button”>Samsung</button>
<button type=”button”>Sony</button>
</div>
<hr>
<h3>Default Buttons:</h3>
<div>
<button type=”button”>Apple</button>
<button type=”button”>Samsung</button>
<button type=”button”>Sony</button>
</div>
<hr>
<h3>Small Buttons:</h3>
<div>
<button type=”button”>Apple</button>
<button type=”button”>Samsung</button>
<button type=”button”>Sony</button>
</div>
</div>
</body>
</html>
Vertical Button Groups
Bootstrap 5 also supports vertical button groups:
Use the class .btn-group-vertical to create a vertical button group:
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Vertical Button Group</h2>
<p>Use the .btn-group-vertical class to create a vertical button group:</p>
<div>
<button type=”button”>Apple</button>
<button type=”button”>Samsung</button>
<button type=”button”>Sony</button>
</div>
</div>
</body>
</html>
Button Groups Side by Side
Button groups are “inline” by default, which makes them appear side by side when you have multiple groups:
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Button Group</h2>
<p>Button groups are “inline” by default, which makes them appear side by side when you have multiple groups:</p>
<div>
<button type=”button”>Apple</button>
<button type=”button”>Samsung</button>
<button type=”button”>Sony</button>
</div>
<div>
<button type=”button”>BMW</button>
<button type=”button”>Mercedes</button>
<button type=”button”>Volvo</button>
</div>
</div>
</body>
</html>
Nesting Button Groups & Dropdown Menus
Nest button groups to create dropdown menus (you will learn more about dropdowns in a later chapter):
Example
<!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 href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Nesting Button Groups</h2>
<p>Nest button groups to create dropdown menus:</p>
<div>
<button type=”button”>Apple</button>
<button type=”button”>Samsung</button>
<div>
<button type=”button” data-bs-toggle=”dropdown”>Sony</button>
<ul>
<li><a href=”#”>Tablet</a></li>
<li><a href=”#”>Smartphone</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>