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