Bootstrap 5 Dropdowns Directions

Bootstrap 5 Dropdowns Directions are used to change the direction in which we want the dropdown to pop up. The arrow direction is changed based on the direction set for the dropdown to appear.

Bootstrap 5 Dropdowns Directions:

• Dropdown Dropleft: This is used to show dropdown menus left-side of the reader by using the .dropstart class.
• Dropdowns Dropright: This is used to show dropdown menus right-side of the reader by using the .dropend class.
• Dropdowns Dropup: This is used to show dropdown menus above the parent elements by using the .dropup class.

Syntax:

<div class="btn-group dropdown-direction-class">
 ...
</div>

Below examples illustrate the Bootstrap 5 Dropdowns Directions:

Example 1: In this example, we will set the direction of the dropdown to show upwards.

Output:

👁 Image

Example 2: In this example, we will set the direction of the dropdown to show on the right.

Output:

👁 Image

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