How to left align bootstrap 3 dropdown menu? - css

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">
My Menu <span class="caret"></span>
<ul class="dropdown-menu pull-left" role="menu">
<li>Menu Item 01</li>
<li>Menu Item 01</li>
<li>Menu Item 02</li>
<li>Menu Item 03</li>
<li>Menu Item 04</li>
<li></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">
My Menu <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-left" role="menu">
<!-- write your code here -->
</ul>
</li>
Bootstrap is BEST

Answer 3

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

Answer 4

As the answers given above are too old, would like to provide working solution for Bootstrap 3.3.7.
Use the given css on your .dropdown-menu div :
.dropdown-left-manual {
right: 0;
left: auto;
padding-left: 1px;
padding-right: 1px;
}
Explaination :
"right:0;" to make then ending of menu inline with end of dropdown
button.
"left:auto;" to override the left:0 given in dropdown-menu
class by bootstrap.
paddings are used to correct hovers on menu item, can be ignored.

Answer 5

Change navbar-right to navbar-left and add a pull-right class to the UL.
<ul class="nav navbar-nav navbar-left text-uppercase pull-right">
Check out the JSfiddle for an example.
http://jsfiddle.net/eqcpLj6k/1/

Answer 6

For Bootstrap 4:
There are CSS classes named: .dropup, .dropright and .dropleft.
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Source: Bootstrap

Answer 7

For a dropdown item that has been floated to the right of the screen, with its dropdown content flowing over the screen, just add the below code to prevent the content of the dropdown from flowing over the screen.
right: 0;