RTL

Learn how to enable support for right-to-left text in CoreUI for Bootstrap across our layout, components, and utilities.

On this page

Get familiar

We recommend getting familiar with CoreUI for Bootstrap first by reading through our Getting Started Introduction page. Once you’ve run through it, continue reading here for how to enable RTL.

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

Required HTML

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

Set dir="rtl" on the <html> element.
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:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/css/coreui.rtl.min.css" integrity="sha384-+svb5RGEa6pBHLgCtNE8up/C9tHmRhcp82yJRlMOx5/bA7KLYlmsNSCz4/ZONZfZ" crossorigin="anonymous">

Starter template

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

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CoreUI for Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/css/coreui.rtl.min.css" integrity="sha384-+svb5RGEa6pBHLgCtNE8up/C9tHmRhcp82yJRlMOx5/bA7KLYlmsNSCz4/ZONZfZ" crossorigin="anonymous">

    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: CoreUI for Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/js/coreui.bundle.min.js" integrity="sha384-yaqfDd6oGMfSWamMxEH/evLG9NWG7Q5GHtcIfz8Zg1mVyx2JJ/IRPrA28UOLwAhi" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and CoreUI for Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/js/coreui.min.js" integrity="sha384-aSKS9XOpUPpbt04gdmvW98xQixHuU0EpjTi4UM/qEg13Aupu+G/Vbj00+1XwcPc1" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Approach

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

First, as in CoreUI 3 we decided to build it with our own mixins This gives us full control and allows us to generate LTR and RTL separately, or if needed one stylesheet with both versions without any style’s duplicates.
Second, in CoreUI 3 we introduced a handful of directional classes ex. mfs-auto, but in CoreUI 4 we’ve simplified them ex. ms-auto, and renamed all 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 right 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

When it comes to customization, the preferred way is to take advantage of variables, maps, and mixins.

LTR and RTL at the same time

Need both LTR and RTL on the same page? All you have to do is set following variables:

$enable-ltr: true;
$enable-rtl: true;

After running Sass, each selector in your CSS files will be prepended by html:not([dir=rtl]), and *[dir=rtl] for RTL files. Now you’re able to use both files on the same page.

RTL only

By default LTR is enable and RTL is disable, but you can easily change it and use only RTL.

$enable-ltr: false;
$enable-rtl: true;

Additional resources

RTL Styling 101