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
HTML
<!DOCTYPE html><html> <head> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </head> <body> <div class="m-2"> <h1 class="text-success"> GeeksforGeeks </h1> <h3> Dropdown Menu Responsive Alignment</h3> <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> GeeksforGeeks is a Computer Science Portal </button> <ul class="dropdown-menu dropdown-menu-lg-end"> <li> <button class="dropdown-item" type="button"> Java </button> </li> <li> <button class="dropdown-item" type="button"> Stack </button> </li> <li> <button class="dropdown-item" type="button"> Queue </button> </li> </ul> </div> </div></body> </html> |
Output
Dropdown responsive alignment
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.
HTML
<!DOCTYPE html><html> <head> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </head> <body> <div class="m-2"> <h1 class="text-success"> GeeksforGeeks </h1> <h3> Dropdown Menu Responsive Alignment</h3> <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> GeeksforGeeks is a Computer Science Portal </button> <ul class="dropdown-menu dropdown-menu-md-end dropdown-menu-sm-start dropdown-menu-lg-start"> <li> <button class="dropdown-item" type="button"> Java </button> </li> <li> <button class="dropdown-item" type="button"> Stack </button> </li> <li> <button class="dropdown-item" type="button"> Queue </button> </li> </ul> </div> </div></body></html> |
Output
Dropdown responsive alignment
References: https://getbootstrap.com/docs/5.0/components/dropdowns/#responsive-alignment
Please Login to comment...