How to set the dropdown button in the center?
Last Updated :
26 Aug, 2020
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 >
< 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...