Twitter Bootstrap CSS That Support from Rtl Languages

Twitter Bootstrap CSS that support from RTL languages

I would suggest this http://pyjamacoder.com/2012/02/01/twitter-bootstrap-v2-rtl-edition/

Demo: http://donaldducky.github.com/bootstrap-rtl/

Right to Left support for Twitter Bootstrap 3

1. I highly recommend bootstrap-rtl. It is built over Bootstrap core, and rtl support is added as it is a bootstrap theme. This would make your code more maintainable as you can always update your core bootstrap files. CDN

2. Another option to use this stand-alone library, It also comes with few awesome Arabic fonts.

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

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.

Twitter bootstrap topbar rtl

If you want to create RTL website with twitter bootstrap you can use RTL version of it.

http://pyjamacoder.com/2012/02/01/twitter-bootstrap-v2-rtl-edition/

and

https://github.com/donaldducky/bootstrap-rtl

I create webpage with these

sushiant.com created with rtl version of bootstrap

Does Twitter Bootstrap have any RTL or i18n support?

[answering my own question]

Lack of RTL support in bootstrap is well known, discussed and documented issue. Apparently, there are discussions all over the web, specifically - in the GitHub project.

In GitHub, issue #6409 is the most recent discussion, with the very promising comment from @mdo that this will come in 3.0.

In the mean time, there are several things one can do. By far, the easiest approach would be to use the RTL Bootstrap from Hamed Ramezanian. Hamed manually changed the source file (mostly, the *.less files), and built a comparable framework for Right to Left. He even converted the documentation, and created a Persian web site: http://rbootstrap.ir/ (I speak Hebrew, so the site isn't very useful for me). As of April 2013 the project is very well maintained, with the most recent Bootstrap drop (v2.3.1) converted.

---

Related Topics