Bootstrap 5 Dropdowns Menu alignment
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. The .dropdown class is used to design the drop-down menu.
Using Bootstrap 5 dropdown menu alignment classes dropdown menu can be aligned in any direction like the end, start, drop start,dropUp, etc
- Dropdown Menu Alignment option: The dropdown menu is positioned 100% from the top and along the left side of its parent, by default. We can change its alignment to right, by adding a dropdown-menu-end class.
- Dropdown Menu Responsive Alignment: To utilize responsive alignment, we need to disable dynamic positioning by adding the data-bs display=”static” attribute. Moreover, we need to add breakpoint-specific alignment class
Below examples illustrate the Bootstrap 5 Dropdowns Menu alignment:
Example 1: In this example, we will learn about Dropdown Menu Alignment options
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 = "text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Dropdown Menu Alignment Options</ h3 >
</ div >
< div class = "btn-group " >
< button type = "button"
class = "btn-success dropdown-toggle dropdown-toggle-split"
data-bs-toggle = "dropdown" >
Select Course from GeeksforGeeks </ button >
< div class = "dropdown-menu dropdown-menu-end " >
< a class = "dropdown-item" href = "#" >
C Programming
</ a >
< a class = "dropdown-item" href = "#" >
C++ Programming
</ a >
< a class = "dropdown-item" href = "#" >
Java Programming
</ a >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output
Dropdown Menu Alignment Options
Example 2: In this example, we will learn about Dropdown Menu Responsive Alignment.
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 = "text-center" >
< 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" >
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 Menu Responsive Alignment
References: https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment
Last Updated :
02 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...