title: How can I center the items in the dropdown menu of bootstrap?
body: <p>I already centered the dropdown menu on my page. However, when I click on the dropdown menu, the items inside it are still on the left side... I tried to use css:</p>
  
  <pre><code>    .dropdown-menu.li {
          position: center;
      }
  </code></pre>
  
  <p>But it didn't work... Now, I am stuck here... Any help would be appreciated...</p>
  
  <p>Here is my html page:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-ms-12 text-center"&gt;
              &lt;p&gt;Choose your school&lt;/p&gt;
              &lt;div class="dropdown"&gt;
                  &lt;button class="btn btn-default dropdown-toggle" type="  button" id="dropdownMenu1" data-toggle="dropdown" aria- haspopup="true" aria-expanded="true"&gt;
                  Dropdown
                  &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul class="dropdown-menu dropdown-menu-center" aria-labelledby="dropdownMenu1"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- end col-ms-12 --&gt;
      &lt;/div&gt;
      &lt;!-- end row --&gt;
  &lt;/div&gt;
  &lt;!-- end container --&gt;
  </code></pre>
  
  <p>This is the image of the error:<a href="http://s12.postimg.org/ovwb6msul/Dropdown_Error.png" rel="nofollow">http://s12.postimg.org/ovwb6msul/Dropdown_Error.png</a></p>