Bootstrap 4 RTL

First and Most Accurate RTL Edition of Bootstrap 4.x (since 2018 Feb)

Bootstrap 4 RTL logo

First and Most Accurate RTL Edition of Bootstrap 4.x (since 2018 Feb)

Download ver. 4.6.2 + RTL rev. 1 (zipped) Latest version/revision on UNPKG CDN npm i @laylazi/bootstrap-rtl Full documentations in RTL direction Examples in RTL direction Codebase

Bootstrap 4 will officially end of life January 1, 2023, though you’re obviously welcome to continue using it longer than that.

Hints


  • Use this package like official package.
  • Use <html ... dir="rtl" ... > for correct PRINT layout and also, because of MS IE/EDGE 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.

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.

GitHub mark
Hosted on GitHub Pages
Cloudflare icon
Resolved by Cloudflare DNS
Let's Encrypt icon
Secured by Let's Encrypt