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