Changing the direction of a Bootstrap dropdown

Changing the direction of a Bootstrap dropdown

How can I change the direction of a Twitter Bootstrap dropdown?
I have a dropdown like this:

But I want it to look like this:


Solution 1:

Use pull-right or pull-left classes.

Solution 2:


Deprecated .pull-right alignment
As of v3.1.0, we’ve deprecated
.pull-right on dropdown menus. To right-align a menu, use
.dropdown-menu-right. Right-aligned nav components in the navbar use a
mixin version of this class to automatically align the menu. To
override it, use .dropdown-menu-left.

In your case, adding dropdown-menu-right class to the div that has the dropdown-menu class should do the trick.

Solution 3:

Here it is (using dropdown-menu-right):

<ul class="dropdown-menu dropdown-menu-right">
   <li><a href"#">Action</a></li>
   <li><a href="#">Another action</a></li>

Solution 4:

transform: rotateY or -webkit-transform:rotateY will do the trick, let’s apply it for the dropdown menu;

navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right {
    -webkit-transform: rotateY(180deg);

Or you can insert this into .dropdown-menu or .open > .dropdown-menu classes due to your exact rquirement. Now it looks like:

Related:  jQuery / Twitter Bootstrap data-loading-text button with delay


As can be seen all links need to be reverted so it’s simple to do with same CSS rule:

.dropdown-menu > li > a {
    -webkit-transform: rotateY(180deg);

Now it’s looking like:


Needs a bit cleanup via changing dropdown-menu’s position by left:10px; and it will look like exactly how you wanted:

final result

Solution 5:

There seem to be no option in Twitter Bootstrap to handle the direction on the dropdown. All that has some effect on the position of the arrow is this class .navbar .nav > li > .dropdown-menu:before Try fiddling with it to view changes in the direction of the drop down