Bootstrap 5 Dropdowns Responsive alignment
Last Updated :
30 Nov, 2022
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
Share your thoughts in the comments
Please Login to comment...