@laylazi/bootstrap-rtl 4.6.2-1 • Public • Published 2 years ago
Bootstrap 4 RTL
Hints:
Use this package like official package.
Use <html ... dir="rtl" ... >
for correct PRINT layout and also, because of MS IE (10-11) / EDGE (12-18) / EDGE (chromium) layout engine RTL capabilities.
Use UTF-8 encoding.
Always follow XHTML rules.
bootstrap.js
of this package contains a patch about Carousel. Use it to correct behaviors of Carousels on touchable devices.
Usage:
In case of adapting/converting Bootstrap 4.x templates:
Replace official bootstrap.js
references by bootstrap.js
[of this package] , in all HTML files. (just in case of using BS Carousel)
Replace all official bootstrap.css
references by bootstrap-rtl.css
in all HTML files.
Inside every HTML file, find these direction specific CSS class names and change them:
from border-left
to border-right
and vice versa.
from border-left-0
to border-right-0
and vice versa.
from rounded-left
to rounded-right
and vice versa.
from float-left
to float-right
and vice versa.
from ml-*
to mr-*
and vice versa.
from pl-*
to pr-*
and vice versa.
from text-left
to text-right
and vice versa.
from text-*-left
to text-*-right
and vice versa.
from dropleft
to dropright
and vice versa.
from dropdown-menu-left
to dropdown-menu-right
and vice versa.
from dropdown-menu-*-left
to dropdown-menu-*-right
and vice versa.
Also, to correct Popovers / Tooltips direction, change all data-placement="left"
to data-placement="right"
and vice versa.
After that, use RTLCSS to adapt / convert all customized css codes to RTL edition.
Package Sidebar Install npm i @laylazi/bootstrap-rtl
Downloads Weekly Downloads