Bootstrap 4 RTL for Right to left directional languages like Arabic,Persian,Hebrew and Urdu.
The following W3C web page provides a good information for RTL languages http://www.i18nguy.com/temp/rtl.html.
npm install bootstrap-reverse
Make sure node.js and git client are locally installed on your machine and then run the following commands:
cd bootstrap-reverse
npm install
gulp
If your website supports:
| Case | Files To Use | Note |
|---|---|---|
| Only Left-to-Right languages | Don't use this package at all | The default bootstrap layout is left-to-right, so you don't need this package at all. |
| Only Right-to-Left languages | Use foundation version only | Foundation version will not reset any class with name left/right and r/l. |
| Multilingual and Uses BOTH Direction like English and Arabic, And You don't care for semantic error | Use bootstrap-reverse version | This version update all bootstrap classes relating to LEFT/RIGHT direction, BUT provides semantic errors and it is best to start stlying your site from English first. |
| Multilingual and Uses BOTH Direction like English and Arabic, And You care for semantic error but You don't care for adding new unofficial classes | Use bootstrap-reverse-extender version | This version will introduce new classes for every bootstrap class containing left or right with start/end alternatives. |
- Dropdown width and positions. we solve the dropdown issues by the following Javascript hack:
$('.dropdown, .btn-group, .input-group-prepend, .input-group-append').on('shown.bs.dropdown',function(){vardropDown=$(this).find(".dropdown-menu");setTimeout(function(){varprevious=dropDown.css("-webkit-transform")||dropDown.css("-moz-transform")||dropDown.css("-ms-transform")||dropDown.css("-o-transform")||dropDown.css("transform")||"Either no transform set, or browser doesn't do getComputedStyle";varvalues=previous.split("(")[1];values=values.split(")")[0];values=values.split(", ");varx=0;vary=parseInt(values[5]);varz=0;dropDown.css({transform: "translate3d("+x+"px,"+y+"px,"+z+"px)",left: "auto",right: "auto"});},0);});Bootstrap-reverse is copyrighted by JavaTMP and licensed under MIT license.