Skip to content
GitLab

Add RTL (right to left) support to 3.0.0-wip

Closed Administrator requested to merge github/fork/malekpour/3.0.0-wip into 3.0.0-wip

Created by: malekpour

As we discussed on pull request #6409, RTL added in a separate rtl.less file on branch 3.0.0-wip. All components supported. The page rtl.html, loads Bootstrap documentation .mustache templates on the fly and renders RTL/LTR contents correctly without any modification. Tested and worked with Chrome 23, FireFox 17 and IE10.

Developers can add RTL layout support to their current Bootstrap websites, simply by adding .rtl CSS class to any HTML element. e.g:

<body class="rtl">...</body>

or dynamically

function switchLayout() {
  $(document.body).toggleClass('rtl')
}

Another class, .mirror is useful to change direction of arrows and font icons. See its functionality in 'Icons by Glyphicons' section of the demo.

Online Demo (buttons on navigation bar added to compare RTL/LTR layouts, F2 [RTL/LTR] and F3 [Mirror/Normal] keys also works and when modal popup is visible only hot keys will work)