Core Code
Core Code Modern Dev Handbook

Button Group with Dropdown

Combine a button and dropdown menu inside a group.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<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">
</head>

<body>

<div class="container py-5">

<div class="btn-group">

<button class="btn btn-primary">Action</button>

<button class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"></button>

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

More BS5 Button Groups Examples (7)

example Basic Button Group open example example Outline Button Group open example example Button Group Sizes open example example Vertical Button Group open example example Button Toolbar open example example Toggle Button Group open example example Pagination Style Buttons open example