How can I edit the position of the items inside the dropdown menu?

[nevergiveup1989]

Hi guys, I am wondering how can I edit the position of the items inside the dropdown menu? Now, I tried to use the class dropdown-menu-center but it didnt work... Now, my dropdown menu is centered in the page as I want but when the users click on it, the items inside the menu are still on the left side of the screen. So, how can I fix it? Do I need to over-write the css file, or use any specific class...

Here is my html page:

<div class="container">
<div class="row">
<div class="col-ms-12 text-center">
<p>Choose your school</p>
<div class="dropdown dropdown-menu-center">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div> <!-- end col-ms-12 -->
</div> <!-- end row -->

[edlfrey]

... Now, my dropdown menu is centered in the page as I want but when the users click on it, the items inside the menu are still on the left side of the screen. ...

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>

If I am understanding you correctly the Action, Another action etc are offset to the left of the caret. I think this change will do what you want - Maybe? <ul class="dropdown-menu pull-right">

Before making the change perhaps you could look at edwardfrey.com and see if that is lining up as you want.

[nevergiveup1989]

Thank you very much. I figured it out by myself. Have a good day.