You may also want to read up on the RTLCSS project, as it powers our approach to RTL.

The RTL feature is still experimental and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? , we’d love to get your insights.

Required HTML

There are two strict requirements for enabling RTL in Bootstrap-powered pages.

  1. Set on the <html> element.
  2. Add an appropriate lang attribute, like lang="ar", on the <html> element.

From there, you’ll need to include an RTL version of our CSS. For example, here’s the stylesheet for our compiled and minified CSS with RTL enabled:

You can see the above requirements reflected in this modified RTL starter template.

Our approach to building RTL support into Bootstrap comes with two important decisions that impact how we write and use our CSS:

  1. First, we decided to build it with the project. This gives us some powerful features for managing changes and overrides when moving from LTR to RTL. It also allows us to build two versions of Bootstrap from one codebase.

  2. Second, we’ve renamed a handful of directional classes to adopt a logical properties approach. Most of you have already interacted with logical properties thanks to our flex utilities—they replace direction properties like left and in favor start and end. That makes the class names and values appropriate for LTR and RTL without any overhead.

For example, instead of .ml-3 for margin-left, use .ms-3.

Working with RTL, through our source Sass or compiled CSS, shouldn’t be much different from our default LTR though.

Customize from source

Using , you can make a variable output a different value for RTL. For example, to decrease the weight for throughout the codebase, you may use the /*rtl: {value}*/ syntax:

Which would ouput to the following for our default CSS and RTL CSS:

In the case you’re using a custom font, be aware that not all fonts support the non-Latin alphabet. To switch from Pan-European to Arabic family, you may need to use /*rtl:insert: {value}*/ in your font stack to modify the names of font families.

For example, to switch from Helvetica Neue Webfont for LTR to Helvetica Neue Arabic for RTL, your Sass code look like this:

The breadcrumb separator is the only case requiring its own brand new variable— namely $breadcrumb-divider-flipped —defaulting to .

Additional resources