Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

RTL (right to left)

Many languages, such as Arabic, Persian, Hebrew, are written from right to left.

MDB provides the RTL feature so you can easly adapt your project to the needs of users who speak one of the languages that are written from the right to the left.

In this short lesson we will learn how to use it.

Step 1 - set a dir="rtl" attribute

The first thing we need to do is set the appropriate attribute on the <html> element in the index.html file, which will change the default direction (i.e. left to right) to the RTL direction (i.e. right to left).

        
            
    
        <html dir="rtl">
Step 2 - set the appropriate language attribute

Next, we need to define what language we will use. So again in the <html> element we add an attribute, this time lang="ar", defining the language of the document as Arabic.

        
            
    
        <html lang="ar" dir="rtl">
Step 3 - import an RTL version of MDB CSS

The last thing we need to do is to import an RTL version of MDB in /src/scss/styles.scss file:

        
            
    
        @import 'mdb-ui-kit/css/mdb.rtl.min.css';
Step 4 - add some content

And now we can add some content to see if everything works as it should. So let's add a regular card (with Arabic text) to the index.html file:

        
            
    
        <div class="d-flex justify-content-center m-5">

          <!-- Card -->
          <div class="card" style="max-width: 420px;">
            <div class="card-body">
              <h5 class="card-title">عنوان البطاقة</h5>
              <p class="card-text">
                بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
              </p>
              <button type="button" class="btn btn-primary">زر</button>
            </div>
          </div>

        </div>

And it works!

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 spacing docs.

John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.