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