How to left align bootstrap 3 dropdown menu?

for Twitter Bootstrap 3

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

hope it helps :)


Adding this style element to the dropdown <ul> will align the dropdown to the left side of the menu item:

left:0;

See this Bootply which targets the .dropdown-menu.pull-left and adds a left:0;. This should solve your problem.


Update

I see that Bootstrap has deprecated pull-right and pull-left as of Bootstrap 3.1.0. Use dropdown-menu-left class to use built-in Bootstrap css to align the dropdown on the left edge so you don't need extra CSS. See this updated Bootply


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