How to right align / justify bootstrap dropdown menu items?

Question

I'm trying to align the items within a standard bootstrap dropdown menu to the right hand side within the menu. Normally they are left aligned.

I need this because I'm displaying languages that are read Right To Left (RTL).

Nothing I try seems to work properly, using "pull-right" class on any element, eg the <li> , <a> or <span> all fail when hovering over an item - eg hilight is wrong size or shape.

Note that the dropdown-menu-right class in the <ul> only aligns the whole menu container with the parent button, not the items within the menu with the container (which is what I want). Code currently is:

   <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#"><span dir="rtl">جديد ...</span></a></li>
      <li><a href="#"><span dir="rtl">حفظ ...</span></a></li>
      <li><a href="#"><span dir="rtl">تحميل ...</span></a></li>
      <li><a href="#"><span dir="rtl">نص عادي (العادية) المشاركة ...</span></a></li>
      <li class="divider"></li>
      <li><a href="#" id="quitapp"><span dir="rtl"><i class="fa fa-close fa-lg fa-fw"></i>&nbsp;الإقلاع عن التدخين ...
    </span></a></li>
    </ul>

(Note: I need the <span dir="rtl"> to make sure text is displayed in the right direction, and want to keep the overall look of the menu (so not sure about converting to <divs> or <listgroups> )

Any suggestions / solutions much appreciated! I'm using Bootstrap 3.3.5

Many thanks

Answer 1

You can use style = "text-align : right;" for the a tags. It should work.