Skip to content

Build Multilangual Website with Bootstrap very easily And quick switch between Directions

License

Notifications You must be signed in to change notification settings

rasool1994/Bootstrap-RTL-LTR-Switchable

 
 

Repository files navigation

[Bootstrap RTL LTR Switchable]

Easy Internationalization Your Website With One Click

if you Want Build Website with Multilangual And you have to Design two Theme For RTL and LTR this is for You ..! With "Bootstrap RTL LTR Switchable" you can build RTL Website Then change it to LTR with One Click!!

Alt text

Quick start

Follow This Steps for Start this:

[This is RTL First . it means you have to First Design RTL]

  • Download the latest release- Currently Test Version 2014-11-17.

  • if you use Less files You can switch RTL Or LTR Easily. All you Need to do first Open variables.less Then At the end Lines you Can Change @LangDir variable. if change it to ltr. your website Direction Completly Change to ltr (even swap margins and paddings)

  • if you Dont's use Less files And use minified or Ready CSS files you Can use bootstrapRTl.min.css And After your Design is Completed. You Can Switch it With LTR CSS Version

  • Now You Can See Your Website Complete Changed And Reverse

All Toturials is Similar To Bootstrap But you have to Use My Switchable Margins And Paddings instead of Classic margins And Paddings in Styles.

Because This Classes Convert Against Style When you Change Language.

[Switchable Margins Classes]

.mr-lg = Margin-right According to Your Large Monitor Size
.ml-lg = Margin-left According to Your Medium Monitor Size
.mr-md = Margin-right According to Your Medium Monitor Size
.ml-md = Margin-left According to Your Medium Monitor Size
.mr-sm = Margin-right According to Your Small Monitor Size
.ml-sm = Margin-left According to Your Small Monitor Size
.mr-xs = Margin-right According to Your Extra Small Monitor Size
.ml-xs = Margin-left According to Your Extra Small Monitor Size
.mr-0 = Margin-right is set To 0
.ml-0 = Margin-left is set To 0

[Switchable Paddings Classes]

.pr-lg = Padding-right According to Your Large Monitor Size
.pl-lg = Padding-left According to Your Medium Monitor Size
.pr-md = Padding-right According to Your Medium Monitor Size
.pl-md = Padding-left According to Your Medium Monitor Size
.pr-sm = Padding-right According to Your Small Monitor Size
.pl-sm = Padding-left According to Your Small Monitor Size
.pr-xs = Padding-right According to Your Extra Small Monitor Size
.pl-xs = Padding-left According to Your Extra Small Monitor Size
.pr-0 = Padding-right is set To 0
.pl-0 = Padding-left is set To 0
[** This Margins And Paddings Switch Directions Automaticly When You Change Language **]

Bugs and feature requests

Have a bug or a feature request? Please open a new issue.

Contributing

We Are Currently Testing This Codes And We Expect Some places not be Swichable And forgotten We Want you if Found bug in This Releases tell us And We Fix it Quickly.

Creators

Amir Alian

About

Build Multilangual Website with Bootstrap very easily And quick switch between Directions

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 41.0%
  • JavaScript 39.1%
  • HTML 18.7%
  • Python 1.1%
  • Shell 0.1%