Bootstrap

About Lesson

Different Dropdown Variants

.btn-group → Groups buttons together
.dropdown-toggle-split → Creates a split button dropdown
.dropup → Changes the dropdown direction to upward
.dropend → Opens dropdown menu to the right
.dropstart → Opens dropdown menu to the left

Example1: Split Button Dropdown

HTML

<div class="btn-group">
  <button type="button" class="btn btn-success">Options</button>
  <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
  </ul>
</div>

Output:

Example 2: Dropup Menu

HTML

<div class="btn-group dropup">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>

Output: