@laylazi/bootstrap-rtl

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.

4.6.2-1

latest

4.6.2 rev. 1

Source

npm

Version published: 3 years ago

Weekly downloads: 513

Maintainers: 1

Weekly downloads

Created: 6 years ago

Source

Bootstrap 4 RTL

Latest dist.: Version 4.6.2 (Official) + RTL 4.6.2 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 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.

Keywords

FAQs

What is @laylazi/bootstrap-rtl?

Is @laylazi/bootstrap-rtl popular?

Is @laylazi/bootstrap-rtl well maintained?

Package last updated on 25 Jul 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install