Bootstrap - RTL

This chapter discusses about RTL (right to left) support provided by Bootstrap. The RTL feature supports for right-to-left text across your layout, components and utilities.

Requirements

To enable RTL in pages powered by Bootstrap, you must fulfill the two requirements. They are as follows:

  • On <html> element, set dir-"rtl".

  • On <html> element, add an appropriate lang attribute, such as lang="ar".

You need to include the RTL version of CSS. For example, here is a stylesheet with RTL enabled:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" integrity="sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq" crossorigin="anonymous">

Starter template

Following is a sample of starter template meeting the requirements for enabling RTL:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" integrity="sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq" crossorigin="anonymous">

    <!--"Welcome to Tutorialspoint" written in arabic-->
    <title>مرحبًا بك في Tutorialspoint</title>
</head>
<body>
    <!--"Welcome to Tutorialspoint" written in arabic-->
    <h1>مرحبًا بك في Tutorialspoint</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
    -->
</body>
</html>

Customize from source

Use the variables, maps and mixins, for customization purposes. The approach works exactly like LTR, for RTL.

Custom RTL values

There are certain directives for RTL CSS values, via which you can set the output of a variable different for RTL. For an example, in order to decrease the font weight throughout your codebase, you can use the syntax as /*rtl: {value}*/.

    $font-weight-bold: 600 #{/* rtl:500 */} !default;

This would output to the following for default CSS and RTL CSS:

    /* bootstrap.css */
    dt {
    font-weight: 600 /* rtl:500 */; 
    }

    /* bootstrap.rtl.css */
    dt {
    font-weight: 500;
    }

Alternative font stack

You should be aware that not all the non-Latin alphabets are supported. Hence in order to switch from Pan-European to Arabic family of fonts, you may need to use /*rtl:insert: {value}*/ in your font stack to alter the names of font families.

To switch from Helvetica Neue font for LTR to Helvetica Neue Arabic for RTL, your Sass code could look like this:

    $font-family-sans-serif:
    Helvetica Neue #{"/* rtl:insert:Arabic */"},
    
    // Cross-platform generic font family (default user interface font)
    system-ui,
    
    // Safari for macOS and iOS (San Francisco)
    -apple-system,
    
    // Chrome < 56 for macOS (San Francisco)
    BlinkMacSystemFont,
    
    // Windows
    "Segoe UI",
    
    // Android
    Roboto,
    
    // Basic web fallback
    Arial,
    
    // Linux
    "Noto Sans",
    
    // Sans serif fallback
    sans-serif,
    
    // Emoji fonts
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

RTL and LTR at the same time

Do you want to use LTR and RTL together? Its very much possible, you just need to wrap your @imports with a class, and set a custom rename rule for RTLCSS:

    /* rtl:begin:options: {
        "autoRename": true,
        "stringMap":[ {
          "name": "ltr-rtl",
          "priority": 100,
          "search": ["ltr"],
          "replace": ["rtl"],
          "options": {
            "scope": "*",
            "ignoreCase": false
          }
        } ]
      } */
      .ltr {
        @import "../node_modules/bootstrap/scss/bootstrap";
      }
      /*rtl:end:options*/

Each selector in your CSS files will have the prefix .ltr (or .rtl for RTL files) after executing Sass and RTLCSS. Now that both files can be used on the same page, you can use either the .ltr or .rtl component wrapper extension to specify which direction to utilise.

While working with LTR and RTL implementation together, you need to consider the following points:

  1. Make sure to add dir and lang attributes accordingly, when switching .ltr and .rtl

  2. Try to do some customization and load one of the two files (ltr & rtl) asynchronously, as loading of both the files can cause performance issues.

  3. Nesting styles will prevent the form-validation-state() mixin and it may not work as intended.

The Breadcrumb case

The only case that requires its own brand-new variable is the breadcrumb separator, namely $breadcrumb-divider-flipped, defaulting to $breadcrumb-divider.

Advertisements