MDB 5 RTL

Introduction

This short tutorial shows how to enable support for right-to-left text in MDB 5 across our layout, components, and utilities.

Experimental feature: The RTL feature is still experimental and will probably evolve according to user feedback.

See an example of our components using the RTL direction.


Enable RTL

There are three requirements for enabling RTL in MDB 5:

  1. Set dir="rtl" on the element.
  2. Set an appropriate lang attribute on the element. For example: lang="ar".
  3. Include an RTL version of our CSS (mdb.rtl.min.css file) in the main.js

Here are examples of a index.html and main.js files that implement the above requirements:

        
            
          <!DOCTYPE html>
          <html lang="ar" dir="rtl">

          <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width,initial-scale=1.0">
            <link rel="icon" href="<%= BASE_URL %>mdb-favicon.ico">
            <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
            <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
            <title>MDB Vue App</title>
          </head>

          <body>
            <noscript>
              <strong>We're sorry but MDB Vue App doesn't work properly without JavaScript enabled. Please enable it to
                continue.</strong>
            </noscript>
            <div id="app"></div>
            <!-- built files will be auto injected -->
          </body>

          </html>

        
        
    
        
            
          import "mdb-vue-ui-kit/css/mdb.rtl.min.css";

          import { createApp } from "vue";
          import App from "./App.vue";
          import router from "./router";

          createApp(App).use(router).mount("#app");

      
        
    

Directional classes

To make the class names appropriate for both LTR and RTL, we replaced direction properties like left and right to start and end respectively.

For example, instead of .ml-1, use .ms-1.


Breadcrumb separator

The breadcrumb seperator is the only element which may require changing the SCSS variable from default $breadcrumb-divider to $breadcrumb-divider-flipped.

You can learn more about changing the breadcrumb separator in our breadcrumb documentation.