Right to Left Support for Twitter Bootstrap 3

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 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/

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.

Bootstrap rtl (right to left) input groups

You have all the components there, just in the wrong order :)

You want your span to come before your input element if you want it on the left side of the input. Also, you don't need the dir="rtl" attribute on the input-group element (the outer div), only on the input element itself.

So you would just need to change your code to the following:

<div class="input-group">
    <span class="input-group-btn">
        <button ng-click="editor.removeQuestion(question)"
                title="Remove question"
                class="btn btn-danger">
            <span class="glyphicon glyphicon-remove"></span>
        </button>
    </span>
    <input type="text" lang="fa" dir="rtl" class="form-control"/>
</div>

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.

display bootstrap popover with right-to-left languages

I have found that this will fix the popover issue you are expeiencing.

In your rtl css place this code:

.popover {
    direction: rtl;
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

The above code will flip the entire popover.

Next, you will need to add the following code right under the above mentioned popover css class:

.popover-title {
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

.popover-content {
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

the above code will then flip back the popover title and body.

This will mean that the popover arrow is correctly positioned and the text in the popover is also displayed correctly - in this case rtl.

Hope this solves your issue.

---

Related Topics