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.

Answer 2

I don't know if this might help you but you can use this Demo, i.e. overriding the pull-right class

css

#div2 {
    direction: RTL;
}

#div2 .pull-right {
    float: left !important;
}

Answer 3

I'd suggest looking into this library. It is built on the Bootstrap core, and right-to-left support is included.

Another option to use this stand-alone library.

Answer 4

You could use RTLCSS to generate a complete RTL version of your CSS, It gives you the ability to extend its functionality to support custom scenarios. Plus it has support for CSS3 transforms (matrix, translate, rotate ... etc.).