html - Bootstrap dropdown RTL alignment -

recently in last release of bootstrap (3.2.0), realized cannot align dropdowns dir="rtl" ordir="ltr" have manually official blog says: (this feature added version 3.1.0)

dropdowns have own alignment classes easier customization

what class , how can make dropdown list right left?

twitter bootstrap's new dropdown alignment quiet different after for.

it changes position of absolutely positioned dropdown menu. i.e. won't make dropdown appear in rtl (right left) mode.

before v3.1.0 .pull-right had been used move dropdown right side of containing block. of v3.1.0 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. right-align menu, use .dropdown-menu-right. right-aligned nav components in navbar use mixin version of class automatically align menu. override it, use .dropdown-menu-left.

but doesn't give rtl effect mentioned before.

rtl mode

what class , how can make dropdown list right left?

in order achieve give direction: rtl; .dropdown element , override default text-align: left of .dropdown-menu text-align: right¹.

besides, have move absolutely positioned dropdown menu right via .dropdown-menu-right well. hence you'll end 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 recommend use additional class name in order not change twitter bootstrap's default styling of .dropdown.}