RTL

Get familiar

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

Required HTML

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

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

That is all. There is no separate RTL stylesheet any more — the compiled CSS carries both directions, so the same file you already import reacts to dir="rtl".

In a Vue app both attributes live on the host document — the index.html your bundler serves, or your framework’s document template (for example Nuxt’s app.head configuration). The stylesheet stays the one you already import in your entry point (see Install).

Starter template

You can see the above requirements reflected in this modified RTL host index.html.

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Components

The Vue components need no RTL configuration. Components that position or navigate directionally — dropdowns, tooltips, popovers, the menu, the carousel, the date, time and range pickers, the range slider, the one-time password input — detect the direction from the document at runtime: dir="rtl" on the <html> element, or on the closest ancestor with a dir="rtl" attribute for a right-to-left region inside a left-to-right page.

Approach

Direction support rests on two decisions:

1. Layout is written with logical properties. margin-inline-start instead of margin-left, inset-inline-end instead of right, float: inline-start instead of float: left — and the same in the class names, so .ms-4 and .start-50 mean “start” in whichever direction the document runs. The browser mirrors them; nothing has to be generated twice.

2. The handful of properties CSS cannot mirror get an explicit rule. transform is not direction-aware, background-position has no logical keyword, and swapping an icon means swapping an asset. Those cases — the off-canvas panel, the range slider’s label and tooltip, the select and validation arrows, the carousel controls, the breadcrumb divider, the narrow sidebar’s toggler — are written once with the ltr-rtl() mixin, which emits the base declaration plus a :dir(rtl) override. There are about twenty of them in the whole library. The override reads the element’s own direction, the same thing a logical property resolves against, so an off-canvas panel inside a dir="ltr" island of a right-to-left page slides out the side it is pinned to. Both of them follow the dir attribute: setting direction from CSS alone turns the logical properties around and leaves the mirrored declarations where they were, so put dir on the element or on one of its ancestors.

Together that is why one stylesheet serves both directions. Up to v5 we published a parallel *.rtl.css for every file; it is gone, and so is the .rtl half of the dist/css folder.

Customize from source

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

LTR only

The RTL overrides are a couple of dozen rules, but if a project is left-to-right for good you can drop them:

@use "@coreui/coreui/scss/coreui" with (
  $enable-rtl: false
);

@use "@coreui/coreui-pro/scss/coreui" with (
  $enable-rtl: false
);

RTL only

The mirror image: the mirrored values become the base declarations and no :dir(rtl) selector is emitted at all. Use it when the whole application is right-to-left.

@use "@coreui/coreui/scss/coreui" with (
  $enable-ltr: false,
  $enable-rtl: true
);

@use "@coreui/coreui-pro/scss/coreui" with (
  $enable-ltr: false,
  $enable-rtl: true
);

Additional resources

• RTL Styling 101