How to left align bootstrap 3 dropdown menu?

Question

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 <ul class="dropdown-menu pull-left" role="menu"> with my code, but it doesn't work. anyone has an idea how to do this ?

Here is my code

<!-- Static navbar -->     <nav class="navbar navbar-inverse" role="navigation">       <div class="container-fluid">         <div class="navbar-header">           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">             <span class="sr-only">Toggle navigation</span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>           </button>           <a class="navbar-brand" href="#"></a>         </div>         <div id="navbar" class="navbar-collapse collapse">                <ul class="nav navbar-nav navbar-right text-uppercase">                 <li><a id="Home" href="index.html">Home</a></li>                 <!-- Visa drapdown-->                 <li class="dropdown">                   <a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>                    <ul class="dropdown-menu pull-left" role="menu">                     <li><a href="#">Menu Item 01</a></li>                       <li><a href="#">Menu Item 01</a></li>                       <li><a href="#">Menu Item 02</a></li>                       <li><a href="#">Menu Item 03</a></li>                       <li><a href="#">Menu Item 04</a></li>                       <li><a href="#"></a></li>                      </ul>                    </li>              </div><!--/.nav-collapse -->           </div><!--/.container-fluid -->         </nav> 

Answer 1

for Twitter Bootstrap 3

<div class="dropdown-menu pull-right">     <!-- write your code here --> </div> 

hope it helps :)

Answer 2

For Bootstrap 3.1.0 or above use .dropdown-menu-left or .dropdown-menu-right to display the drop down menus right or left side of the parent menu. In your case try following.

 <li class="dropdown">     <a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>       <ul class="dropdown-menu dropdown-menu-left" role="menu">        <!-- write your code here -->       </ul>  </li> 

Bootstrap is BEST