Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @laylazi/bootstrap-rtl with all npm packages installed. Try it out:

var bootstrapRtl = require("@laylazi/bootstrap-rtl")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@laylazi/bootstrap-rtl v4.4.101

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.

Bootstrap 4 RTL

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.

In case of adapting/converting Bootstrap© 4.x templates:

  • 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.
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free