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.

Rtl demo free components Rtl demo pro components

Enable RTL

There are three requirements for enabling RTL in MDB 5:

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

Here is an example of a starter HTML template that implements the above requirements:

HTML


        <!DOCTYPE html>
          <html lang="ar" dir="rtl">
            <head>
              <meta charset="UTF-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
              <meta http-equiv="x-ua-compatible" content="ie=edge" />
              <title>مرحبا بالعالم!</title>
              <!-- MDB icon -->
              <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
              <!-- Font Awesome -->
              <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
              <!-- Google Fonts Roboto -->
              <link
                rel="stylesheet"
                href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
              />
              <!-- MDB -->
              <link rel="stylesheet" href="css/mdb.rtl.min.css" />
              <!-- Custom styles -->
              <style></style>
            </head>
            <body>
              ...
            </body>

            <!-- MDB -->
            <script type="text/javascript" src="js/mdb.min.js"></script>
            <!-- Custom scripts -->
            <script type="text/javascript"></script>
          </html>

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.

You can learn more about changes in the directional classes syntax in our migration guide.

Introduction

Enable RTL

Directional classes

Breadcrumb separator