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:

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.