| 1 | # Bootstrap 4 RTL
|
| 2 | - Latest dist.: [Version 4.5.2 (Official) + RTL 4.5.2 rev. 1 (Unofficial)](http://bootstrapper.ir/archive/bootstrap-4.5.2-plus-rtl-rev.1-dist.zip)
|
| 3 | - Visit [full documentaions](http://docs.bootstrapper.ir/) in RTL direction. (English docs)
|
| 4 | - Visit [example pages](http://example.bootstrapper.ir/) in RTL direction.
|
| 5 |
|
| 6 | ## Hints:
|
| 7 | - Use this package like official package.
|
| 8 | - 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.
|
| 9 | - Use UTF-8 encoding.
|
| 10 | - Always follow XHTML rules.
|
| 11 | - `bootstrap.js` of this package contains a patch about Carousel. Use it to correct behaviors of Carousels on touchable devices.
|
| 12 |
|
| 13 | ## Usage:
|
| 14 | - Install with [npm](https://www.npmjs.com/): `npm i @laylazi/bootstrap-rtl`
|
| 15 | - Reference to latest version/revision on UNPKG CDN: [https://unpkg.com/@laylazi/bootstrap-rtl/](https://unpkg.com/@laylazi/bootstrap-rtl/)
|
| 16 |
|
| 17 | ## In case of adapting/converting Bootstrap© 4.x templates:
|
| 18 | - Replace all official `bootstrap.css` references by `bootstrap-rtl.css` in all HTML files.
|
| 19 | - Inside every HTML file, find these direction specific CSS class names and change them:
|
| 20 | - from `border-left` to `border-right` and vice versa.
|
| 21 | - from `border-left-0` to `border-right-0` and vice versa.
|
| 22 | - from `rounded-left` to `rounded-right` and vice versa.
|
| 23 | - from `float-left` to `float-right` and vice versa.
|
| 24 | - from `ml-*` to `mr-*` and vice versa.
|
| 25 | - from `pl-*` to `pr-*` and vice versa.
|
| 26 | - from `text-left` to `text-right` and vice versa.
|
| 27 | - from `text-*-left` to `text-*-right` and vice versa.
|
| 28 | - from `dropleft` to `dropright` and vice versa.
|
| 29 | - from `dropdown-menu-left` to `dropdown-menu-right` and vice versa.
|
| 30 | - from `dropdown-menu-*-left` to `dropdown-menu-*-right` and vice versa.
|
| 31 | - Also, to correct **Popovers** / **Tooltips** direction, change all `data-placement="left"` to `data-placement="right"` and vice versa.
|
| 32 | - After that, use [RTLCSS](https://rtlcss.com/playground/) to adapt / convert all customized css codes to RTL edition. |
| \ | No newline at end of file |