I have a dropdown button in the center of my page, but when I click the dropdown, the actual dropdown part is still on the left side of the page. What's the issue?
HTML
<div> <div> <div> <button type="button">Choose a School <span></span></button> <ul> <li><a href="#">Add your school</a></li> <li><a href="#">Hello</a></li> </ul> </div> </div>
</div>CSS
div.school-options-dropdown { text-align: center;
}
.dropdown { text-align:center;
}
.dropdown-menu { text-align: center;
}6 Answers
You need to put the dropdown menu and the toggle button inside a .btn-group.
Also, Bootstrap provides the .text-center property to align the contents. This can be used on .school-options-dropdown, instead of manually adding CSS.
<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet" />
<div> <div> <div> <button type="button">Choose a School <span></span> </button> <ul> <li><a href="#">Add your school</a></li> <li><a href="#">Hello</a></li> </ul> </div> </div>
</div>I've found this when trying to solve similar problem. Credit to Vladimir Rodkin
.dropdown-menu-center {
right: auto;
left: 50%;
-webkit-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);}If you don't want change your html code, this is css will solve your problem:
.dropdown {text-align:center;}
.button, .dropdown-menu {margin:10px auto}
.dropdown-menu {width:200px; left:50%; margin-left:-100px;}If you are looking to center align the contents of the menu, then
ul.dropdown-menu>li { text-align: center;
}might do the trick.
Make sure you add the alignment in the entire div class defining it
With a Bootstrap 5 you can use JavaScript to override Popper.js after page loads like:
new bootstrap.Dropdown(document.getElementById('dropdown_button'), { popperConfig: function () { return {placement: 'bottom'} }
});Official documentation:
Here are placements you can override to:
