Right to Left support for Twitter Bootstrap 3

Question

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

User · Answer

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

User · Answer

Bootstrap Persian version of the site http   rbootstrap ir  Ver 2 3 2

User · Answer

You can find it here  RTL Bootstrap v3 2 0

User · Answer

This is Another Project   www nuget org packages Twitter Bootstrap RTL

User · Answer

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

User · Answer

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  quot dir quot  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

User · Answer

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    amp  amp  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    amp  amp  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    amp  amp  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    amp  amp  rule selectorText match    col- xs sm md lg - d d                           rule style setProperty  float    layout rtl    right     left                                                  try                   for  var i   0  i  lt  styleSheets length  i                          var rules   styleSheets i  cssRules    styleSheets i  rules                      if  rules                            for  var j   0  j  lt  rules length  j                                  if  rules j  type     4                                    var mediaRules   rules j  cssRules    rules j  rules                                 for  var y   0  y  lt  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

User · Answer

I found this very helpful  check it  http   cdnjs com libraries bootstrap-rtl

User · Answer

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

User · Answer

in every version of bootstrap you can do it manually   set rtl direction to your body 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

[css] Right to Left support for Twitter Bootstrap 3

Examples related to css

Examples related to html

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3