×

Html & Html5

The World's best Software Development Study Portal

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

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

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


bootstrap 5 Example

Split Button


So we can see the dropdown option here.




Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute