Dropdown menu is a menu that offers a list of options to choose from. The title of the menu is always in display and the rest of the items are hidden. It is a toggleable menu in which all the items can be shown by clicking on it.
Dropdown button can be positioned in the center of the page by setting the “text-align” property of dropdown div to center. The following example contains a simple Bootstrap dropdown menu with an added class “my-menu”. The property “text-align: center” is added to the class.
Example: Here, the property “text-align: center” aligns the content of dropdown div to center, which sets the dropdown button to the center.
<!DOCTYPE html> < html >
< head >
< link rel = "stylesheet" href =
integrity =
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin = "anonymous" />
< style >
.my-menu {
/*Sets all the content of dropdown div to center*/ text-align: center;
}
</ style >
</ head >
< body >
<!-- my-menu class is added to dropdown div for styling--> < div class = "dropdown my-menu" >
< button class="btn btn-secondary
dropdown-toggle"
type = "button"
id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
Dropdown button
</ button >
< div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton" >
< a class = "dropdown-item" href = "#" >Action 1</ a >
< a class = "dropdown-item" href = "#" >Action 2</ a >
< a class = "dropdown-item" href = "#" >Action 3</ a >
</ div >
</ div >
integrity =
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous" >
</ script >
</ body >
</ html >
|
Output: