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 le

Answer 1

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;

Answer 2

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 3

for Twitter Bootstrap 3

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

hope it helps :)

Answer 4

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 5

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

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