Button Groups
In a single line or in a group if we want to show buttons. So yes we can do this and we can create this button group vertical , horizontal , nesting , dropdown etc.
And we use .btn-group class for it.
Let’s understand them by this program :-
The .btn-group creates simple button group and we use element here.
Let's understand this by the following example :-
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Button group </h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">Motorola </button>
<button type="button" class="btn btn-primary">Lenovo </button>
<button type="button" class="btn btn-primary">Vivo </button>
</div>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Button group
Motorola
Lenovo
Vivo
So here our button group comes in single line .
Vertical Button Groups
If we want to add button group vertically than we have to use .btn-group-vertical for that.
Let’s understand them by this program :-
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Button group </h2>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Motorola </button>
<button type="button" class="btn btn-primary">Lenovo </button>
<button type="button" class="btn btn-primary">Vivo </button>
</div>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Button group
Motorola
Lenovo
Vivo
So our button group comes vertically.
Split Button Dropdown
We can create the dropdown also in our button group.
Let’s understand them by this program :-
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Split Button</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">Fruit</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Apple</a>
<a class="dropdown-item" href="#">Mango</a>
</div>
</div>
</body>
</html>
Output of this Program
So we can see the dropdown option here.