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

Question

In the Twitter 3 boot block, I have some glyphics in my divs and I add "pull-right" for the default pages. When I change direction to RTL texts, etc. Flips succeeds, but pull-right does not switch to pull-left. What to do to have an icon on the right for LTR and left for RTL?

(Of course, you can add javascript code and check all the edit rights in the body of the page and change them left-to-left, but I do not prefer the JS solution. I tried this , but that did not help.)

Violin: 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 the .pull-right class for float left when it appears after the 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 FIDDLE

Alternatively, you can do this with javascript: (using the 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 will 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 suggest exploring this library . It is built on the core of Bootstrap, and right-to-left support is enabled.

Another use case for this standalone library .

Answer 4

You can use RTLCSS to create the full RTL version of your CSS, it gives you the opportunity to expand your functionality to support custom scripts. In addition, it supports CSS3 transforms (matrix, translation, rotation ... etc.).