Bootstrap 5 Dropdowns split button is used to turn a button into a dropdown toggle with some basic markup. A dropdown button lets the user select from a number of items.
Bootstrap 5 Dropdowns split button class:
- dropdown-toggle-split: This class is used for proper spacing around the dropdown caret icon or symbol.
Syntax:
<div class="btn-group">
<button type="button" class="btn dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">....</a></li>
...
</ul>
</div>
Example 1: In this example, we set a button using .btn class with dropdown toggle on the right side of the button and used .dropdown-toggle-split for proper spacing around the dropdown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Bootstrap 5-GeeksforGeeks </title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body class="m-3">
<div class="container text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h5>Bootstrap 5 Dropdowns Split button</h5>
</div>
<div class="p-3 border bg-light" style="height:120px;">
<div class="btn-group">
<button type="button" class="btn btn-success">
Action
</button>
<button type="button" class="btn btn-secondary
dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown">
<span class="visually-hidden">
Toggle Dropdown
</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
Option</a>
</li>
<li><a class="dropdown-item" href="#">
Other option</a>
</li>
<li><a class="dropdown-item" href="#">
Something related to the option</a>
</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">
Action</button>
<button type="button" class="btn btn-dark
dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown">
<span class="visually-hidden">
Toggle Dropdown
</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
Option</a></li>
<li><a class="dropdown-item" href="#">
Other option</a></li>
<li><a class="dropdown-item" href="#">
Something related to the option</a>
</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">
Action</button>
<button type="button" class="btn btn-danger
dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown">
<span class="visually-hidden">
Toggle Dropdown
</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
Option</a></li>
<li><a class="dropdown-item" href="#">
Other option</a></li>
<li><a class="dropdown-item" href="#">
Something related to the option</a></li>
</ul>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we set a button using .btn class with dropdown toggle on the left side of the button and we use .dropdown-toggle-split for proper spacing around the dropdown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Bootstrap 5-GeeksforGeeks </title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body class="m-3">
<div class="container text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h5>Bootstrap 5 Dropdowns Split button</h5>
</div>
<div class="p-3 border bg-light" style="height:120px;">
<div class="btn-group dropend">
<button type="button" class="btn btn-primary
dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown">
<button type="button" class="btn btn-secondary">
Action
</button>
<span class="visually-hidden">
Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
Option</a></li>
<li><a class="dropdown-item" href="#">
Other option</a></li>
<li><a class="dropdown-item" href="#">
Something related to the option</a>
</li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-info
dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown">
<span class="visually-hidden">
Toggle Dropdown</span>
<button type="button" class="btn btn-danger">
Action</button>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
Option</a></li>
<li><a class="dropdown-item" href="#">
Other option</a></li>
<li><a class="dropdown-item" href="#">
Something related to the option</a>
</li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-dark
dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown">
<button type="button" class="btn btn-warning">
Action</button>
<span class="visually-hidden">
Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
Option</a></li>
<li><a class="dropdown-item" href="#">
Other option</a></li>
<li><a class="dropdown-item" href="#">
Something related to the option</a></li>
</ul>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#split-button