Bootstrap 5 Dropdowns Dropleft

Bootstrap 5 Dropdowns Dropleft is used to open the dropdown on the left-hand side of the user. Dropdown menus can be set up to the left of the elements by adding.dropstart to the parent element.

Bootstrap 5 Dropdowns Dropleft Class:

• dropstart: This class is used to launch dropdown menus to the right of the button.

Syntax:

<div class="btn-group dropstart">
 <button type="button"
 class="btn dropdown-toggle" 
 data-bs-toggle="dropdown">
 ...
 </button>
 <ul class="dropdown-menu">
 <li>...</li>
 </ul>
</div>

Note: In both the example we will use a float-end class so the dropstart can be easily visible.

Example 1: In this example, we will learn about a Dropdown Dropleft.

Output

👁 Bootstrap 5 Dropdowns Dropleft

Example 2: In this example, we will learn about a Dropdown Dropleft using a split button

Output

👁 Bootstrap 5 Dropdowns Dropleft

Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#dropleft