title: Centering dropdown menu using Bootstrap
body: <p>I'm trying to center my dropdown menu in Bootstap. </p>
  
  <pre><code> &lt;ul class="dropdown-menu"&gt;
  </code></pre>
  
  <p>It pulls to the left by default, or I could use <code>pull-right</code> defined as follows to make it go to the right:</p>
  
  <pre><code>.dropdown-menu.pull-right {
    right: 0;
    left: auto;
  }
  </code></pre>
  
  <p>I want to center it though. I'm new to Boostrap and can't figure out how to center it. Any tips? I tried right:50% but that didn't work.</p>
  
  <p>Note: I'm not looking to center the actual text in the dropdown menu. I'm looking to center the actual dropdown menu and carret under the navigation menu item that it drops down from.</p>
  
  <p>Here is my full code snippet in my template:</p>
  
  <pre><code>&lt;ul class="nav"&gt;
      &lt;li id="tab_profile"&gt;
          &lt;a href="{% url profile_detail user.username %}"&gt;{% trans "PROFILE" %}&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="product_data"&gt;
          &lt;a href="{% url all_models %}"&gt;{% trans "PRODUCT DATA" %}&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="product_library"&gt;
          &lt;a href="{% url library %}"&gt;{% trans "LIBRARY" %}&lt;/a&gt;
      &lt;/li&gt;
    &lt;li id="database"&gt;
          &lt;a href="/DATABASE/"&gt;{% trans "DATABASE" %}&lt;/a&gt;
      &lt;/li&gt;
          &lt;li class="dropdown" id = "community"&gt;
          &lt;a class="dropdown-toggle" href="#"&gt;COMMUNITY&lt;/a&gt; 
               &lt;ul class="dropdown-menu pull-right"&gt;
                  &lt;li&gt; &lt;a href="/profiles"&gt;Search&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/questions/"&gt;Questions and Answers&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="{% url view_requests %}"&gt;Requests&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
          &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 4px 0;
    margin: 1px 0 0;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
  }
  .dropdown-menu.pull-right {
    margin-right: auto; 
    margin-left: auto;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/0qD8o.png" alt="enter image description here"></p>