title: How to left align bootstrap 3 dropdown menu?
body: <p><img src="https://i.stack.imgur.com/bvtzb.png" alt="enter image description here"></p>
  
  <p>In the above image MenuItems are align to right side of the MyMenu, I needed to left align the MenuItems of MyMenu (I mean it must aligned to left edge of MyMenu), I try to use pull-left and pull-right class like <code>&lt;ul class="dropdown-menu pull-left" role="menu"&gt;</code> with my code, but it doesn't work. anyone has an idea how to do this ?</p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;!-- Static navbar --&gt;
      &lt;nav class="navbar navbar-inverse" role="navigation"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="#"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
  
                &lt;ul class="nav navbar-nav navbar-right text-uppercase"&gt;
                  &lt;li&gt;&lt;a id="Home" href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;!-- Visa drapdown--&gt;
                  &lt;li class="dropdown"&gt;
                    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; My Menu &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
                    &lt;ul class="dropdown-menu pull-left" role="menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu Item 01&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Menu Item 01&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Menu Item 02&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Menu Item 03&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Menu Item 04&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
  
                    &lt;/li&gt;
  
              &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
            &lt;/div&gt;&lt;!--/.container-fluid --&gt;
          &lt;/nav&gt;
  </code></pre>