Twitter Bootstrap pull-right and pull-left for RTL languages

Question

In Twitter bootstrap 3, I have some glyphicons in my divs and I add "pull-right" for default pages. When I change direction to RTL texts etc. flips successfully but pull-right doesn't switched to pull-left. What should I do to have an icon in right for LTR and in left for RTL ?

(Of course it is possible to add javascript code and check for all pull-rights in page body and change them to pull-left, but I don't prefer JS solution. I tried this but it didn't help.)

Fiddle: http://jsfiddle.net/mavent/dKPE3/1/

<div id="div1" class="alert alert-info">This is my fancy description <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>

<div id="div2" class="alert alert-info">هذا هو بلدي وصف الهوى <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>

Answer 1

You can override .pull-right class to float to the left when it appears after an rtl element.

Like this:

.rtl {
    direction: RTL;
}
.rtl .pull-right {
    float:left !important;
}

And your div element:

<div id="div2" class="alert alert-info rtl">
    هذا هو بلدي وصف الهوى
    <span class="badge badge-info">122</span>
    <a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa">
        <i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i>
    </a>
</div>

Here is a FIDDLE

Alternatively, you can do it using javascript: (Using your same code just add javascript)

$(document).ready(function() {
    $('.pull-right').each(function() {
        if($(this).parent().css('direction') == 'rtl')
            $(this).attr('style', 'float:left !important');
    });
});

Hope this helps.