There have been questions about this before: Twitter Bootstrap CSS that support from RTL languages
But all the answers are good for Bootstrap 2.x
I'm working on a project that is in Arabic (rtl), and I need Bootstrap 3.x right to left.
Does anybody know a fix for that?
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
Another option to use this stand-alone library, It also comes with few awesome Arabic fonts.
in every version of bootstrap,you can do it manually
this do most things that you want for rtl
finally, I can find a new version for the right to left bootstrap. share here for use by all:
bootstrap-3-3-7-rtl and RTL Bootstrap 4.0.0-alpha.6.1
GitHub link:
https://github.com/parsmizban/RTL-Bootstrap
thank you parsmizban.com for creating and share.
I found this very helpful, check it: http://cdnjs.com/libraries/bootstrap-rtl
If you want Bootstrap 3 support for RTL and LTR on your site, you can modify CSS rules "on the fly", attached here is a function, it modifies the major classes for Bootstrap 3 like col-(xs|sm|md|lg)-(1-12), col-(xs|sm|md|lg)-push-(1-12), col-(xs|sm|md|lg)-pull-(1-12), col-(xs|sm|md|lg)-offset-(1-12), there are many more classes to be modified but i needed only those.
All you need to do is call the function layout.setDirection('rtl') or layout.setDirection('ltr') and it will change the CSS Rules for Bootstrap 3 grid system.
Should work on all browsers (IE>=9).
var layout = {};
layout.setDirection = function (direction) {
layout.rtl = (direction === 'rtl');
document.getElementsByTagName("html")[0].style.direction = direction;
var styleSheets = document.styleSheets;
var modifyRule = function (rule) {
if (rule.style.getPropertyValue(layout.rtl ? 'left' : 'right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-push-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'right' : 'left'), rule.style.getPropertyValue((layout.rtl ? 'left' : 'right')));
rule.style.removeProperty((layout.rtl ? 'left' : 'right'));
}
if (rule.style.getPropertyValue(layout.rtl ? 'right' : 'left') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-pull-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'left' : 'right'), rule.style.getPropertyValue((layout.rtl ? 'right' : 'left')));
rule.style.removeProperty((layout.rtl ? 'right' : 'left'));
}
if (rule.style.getPropertyValue(layout.rtl ? 'margin-left' : 'margin-right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-offset-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'margin-right' : 'margin-left'), rule.style.getPropertyValue((layout.rtl ? 'margin-left' : 'margin-right')));
rule.style.removeProperty((layout.rtl ? 'margin-left' : 'margin-right'));
}
if (rule.style.getPropertyValue('float') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-\d\d*/)) {
rule.style.setProperty('float', (layout.rtl ? 'right' : 'left'));
}
};
try {
for (var i = 0; i < styleSheets.length; i++) {
var rules = styleSheets[i].cssRules || styleSheets[i].rules;
if (rules) {
for (var j = 0; j < rules.length; j++) {
if (rules[j].type === 4) {
var mediaRules = rules[j].cssRules || rules[j].rules
for (var y = 0; y < mediaRules.length; y++) {
modifyRule(mediaRules[y]);
}
}
if (rules[j].type === 1) {
modifyRule(rules[j]);
}
}
}
}
} catch (e) {
// Firefox might throw a SecurityError exception but it will work
if (e.name !== 'SecurityError') {
throw e;
}
}
}
you can use my project i create bootstrap 3 rtl with sass and gulp so you can easely customize it https://github.com/z-avanes/bootstrap3-rtl
We Announce the AryaBootstrap,
The last version is based on bootstrap 4.3.1
AryaBootstrap is a bootstrap with dual layout align support and, used for LTR and RTL web design.
add "dir" to html, thats the only action you need to do.
Checkout the AryaBootstrap Website at: http://abs.aryavandidad.com/
AryaBootstrap at GitHub: https://github.com/mRizvandi/AryaBootstrap
