Bootstrap 5 Dropdowns Responsive alignment

Bootstrap 5 Dropdowns Responsive alignment is used to align dropdowns by using the responsive variation classes. We need to add a breakpoint-specific alignment class to make the dropdown alignment responsive.

Dropdown Responsive alignment class

• dropdown-menu{-*}-end: To align the dropdown right with a given breakpoint. Here * can be replaced by sm, md,lg,xl, xxl.
• dropdown-menu{-*}-start: To align the dropdown left with a given breakpoint. Here * can be replaced by sm, md,lg,xl, xxl.

Attribute Required:

• data-bs-display: To utilize responsive alignment, we need to disable dynamic positioning by setting this attribute to "static".

Syntax:

 <ul class="dropdown-menu dropdown-menu-*-**">
 <li>Content</li>
 </ul>

• * can be substituted with screen breakpoints like sm,md,lg etc
• ** can be substituted with alignment options like end, start

Example 1: In this example, The Dropdown menu will be aligned to the end on large screen, and left aligned when not on large screen

Output

Example 2: In this example, The Dropdown menu will be aligned to the end on a medium screen and left aligned on the small screen and large screen.

Output

References: https://getbootstrap.com/docs/5.0/components/dropdowns/#responsive-alignment