Bootstrap dropdown RTL alignment

Question

Recently in the last release of bootstrap (3.2.0), I just realized that we cannot align dropdowns with dir="rtl" ordir="ltr" so we have to do it manually as their official blog says: (This feature added from version 3.1.0)

Dropdowns now have their own alignment classes for easier customization

What is that class and how can I make a dropdown list right to left?

Answer 1

Twitter bootstrap's new dropdown alignment is quite different than what you are after. It only changes the position of absolutely positioned dropdown menu. I.e. it won't make the dropdown appear in RTL (Right To Left) mode.

Before v3.1.0 .pull-right had been used to move the dropdown to the right side of its containing block. However as of v3.1.0 it became deprecated in favor of .dropdown-menu-right/.dropdown-menu-left:

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.

But it doesn't give the RTL effect as mentioned before.

#RTL Mode

What is that class and how can I make a dropdown list right to left?

In order to achieve that you could give direction: rtl; to the .dropdown element and also override the default text-align: left of .dropdown-menu with text-align: right¹.

Besides, you have to move the absolutely positioned dropdown menu to the right via .dropdown-menu-right as well. Hence you'll end up with something like this:

Example Here

.rtl { direction: rtl; }
.rtl .dropdown-menu-right { text-align: right; }

<div class="dropdown rtl">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

---

¹ _{I strongly recommend to use an additional class name in order not to change the Twitter Bootstrap's default styling of .dropdown.}