@laylazi/bootstrap-rtl
v4.6.2-1
Published
First and most accurate RTL edition of Bootstrap 4.x, the most popular front-end framework for developing responsive, mobile first projects on the web.
Downloads
3,850
Maintainers
Readme
Bootstrap 4 RTL
- Latest dist.: Version 4.6.1 (Official) + RTL 4.6.1 rev. 1 (Unofficial)
- Visit full documentaions in RTL direction. (English docs)
- Visit example pages in RTL direction.
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:
- Install with npm:
npm i @laylazi/bootstrap-rtl
- Reference to latest version/revision on UNPKG CDN: https://unpkg.com/@laylazi/bootstrap-rtl/
In case of adapting/converting Bootstrap 4.x templates:
- Replace official
bootstrap.js
references bybootstrap.js
[of this package] , in all HTML files. (just in case of using BS Carousel) - Replace all official
bootstrap.css
references bybootstrap-rtl.css
in all HTML files. - Inside every HTML file, find these direction specific CSS class names and change them:
- from
border-left
toborder-right
and vice versa. - from
border-left-0
toborder-right-0
and vice versa. - from
rounded-left
torounded-right
and vice versa. - from
float-left
tofloat-right
and vice versa. - from
ml-*
tomr-*
and vice versa. - from
pl-*
topr-*
and vice versa. - from
text-left
totext-right
and vice versa. - from
text-*-left
totext-*-right
and vice versa. - from
dropleft
todropright
and vice versa. - from
dropdown-menu-left
todropdown-menu-right
and vice versa. - from
dropdown-menu-*-left
todropdown-menu-*-right
and vice versa.
- from
- Also, to correct Popovers / Tooltips direction, change all
data-placement="left"
todata-placement="right"
and vice versa. - After that, use RTLCSS to adapt / convert all customized css codes to RTL edition.