UNPKG

@laylazi/bootstrap-rtl

Version:

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.

bootstrapper.ir

PerseusTheGreat/bootstrap-4-rtl

33 lines (30 loc) • 2.26 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# Bootstrap 4 RTL - Latest dist.: [Version 4.6.2 (Official) + RTL 4.6.2 rev. 1 (Unofficial)](http://bootstrapper.ir/archive/bootstrap-4.6.2-plus-rtl-rev.1-dist.zip) - Visit [full documentaions](http://docs.bootstrapper.ir/) in RTL direction. (English docs) - Visit [example pages](http://example.bootstrapper.ir/) 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](https://www.npmjs.com/): `npm i @laylazi/bootstrap-rtl` - Reference to latest version/revision on UNPKG CDN: [https://unpkg.com/@laylazi/bootstrap-rtl/](https://unpkg.com/@laylazi/bootstrap-rtl/) ## 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](https://rtlcss.com/playground/) to adapt / convert all customized css codes to RTL edition.