Bootstrap Center Align A Dropdown Menu

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

Solution 1:

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.

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  /><divclass="row"><divclass="col-md-12 school-options-dropdown text-center"><divclass="dropdown btn-group"><buttonclass="btn btn-primary dropdown-toggle"type="button"data-toggle="dropdown">Choose a School
        <spanclass="caret"></span></button><ulclass="dropdown-menu"><li><ahref="#">Add your school</a></li><li><ahref="#">Hello</a></li></ul></div></div></div>

Solution 2:

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);}

https://jsfiddle.net/VovanR/2ao5b22h/

Solution 3:

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;}

Example on jsfiddle.net.

Solution 4:

If you are looking to center align the contents of the menu, then

ul.dropdown-menu>li {
    text-align: center;
}

might do the trick.

Solution 5:

Make sure you add the alignment in the entire div class defining it

Share