[css] Right to Left support for Twitter Bootstrap 3

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?

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

Bootstrap Persian version of the site http://rbootstrap.ir/ Ver.2.3.2

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 find it here: RTL Bootstrap v3.2.0.

I found this very helpful, check it: http://cdnjs.com/libraries/bootstrap-rtl

in every version of bootstrap,you can do it manually

1. set rtl direction to your body
2. in bootstrap.css file, look for ".col-sm-9{float:left}" expression,change it to float:right

this do most things that you want for rtl

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

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.

This is Another Project: www.nuget.org/packages/Twitter.Bootstrap.RTL