@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
2,034
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.jsof 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.jsreferences bybootstrap.js[of this package] , in all HTML files. (just in case of using BS Carousel) - Replace all official
bootstrap.cssreferences bybootstrap-rtl.cssin all HTML files. - Inside every HTML file, find these direction specific CSS class names and change them:
- from
border-lefttoborder-rightand vice versa. - from
border-left-0toborder-right-0and vice versa. - from
rounded-lefttorounded-rightand vice versa. - from
float-lefttofloat-rightand vice versa. - from
ml-*tomr-*and vice versa. - from
pl-*topr-*and vice versa. - from
text-lefttotext-rightand vice versa. - from
text-*-lefttotext-*-rightand vice versa. - from
droplefttodroprightand vice versa. - from
dropdown-menu-lefttodropdown-menu-rightand vice versa. - from
dropdown-menu-*-lefttodropdown-menu-*-rightand 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.
