I have a drop-down button in the center of my page, but when I click the drop-down list, the actual dropdown is still on the left side of the page. What is the problem?
HTML
<div class="row"> <div class="col-md-12 school-options-dropdown"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a School <span class="caret"></span></button> <ul class="dropdown-menu"> <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; }
source share