Bootstrap 5 Dropdowns Split Button

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.

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.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/dropdowns/#split-button