Skip to main content Skip to docs navigation

RTL

Learn how to enable support for right-to-left text in Bootstrap across our layout, components, and utilities.

GitHub Edit on GitHub

ProTip: Get familiar with Bootstrap first with our getting started guide before working with RTL.

How it works

Bootstrap uses CSS logical properties throughout the framework to make RTL support native and automatic. Set dir="rtl" and add a lang attribute, like lang="ar", on your HTML element and the browser will handle the directional layout changes for you. No separate stylesheets are needed.

Logical properties are CSS properties that adapt to the writing mode and direction of content. Instead of using physical directions like left and right, they use logical concepts like start and end:

  • margin-left → margin-inline-start
  • margin-right → margin-inline-end
  • padding-left → padding-inline-start
  • border-right → border-inline-end

When you set dir="rtl", these logical properties automatically flip to match the right-to-left layout without requiring any additional CSS transformations. Only HTML changes are required.

Required HTML

One line of changes to your HTML is all it takes to enable RTL. Bootstrap will then automatically adapt to the RTL direction using logical properties.

DIFF
- <html lang="en">
+ <html lang="ar" dir="rtl">

Live demo

Toggle between LTR and RTL on this page to see Bootstrap's logical properties in action:

Starter template

Here's a modified RTL starter template:

HTML
<!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@6.0.0-alpha1/dist/css/bootstrap.min.css" integrity="sha384-m2xeNCAimonB5eQyLA3FRVMemLPuy43SmG04XRRzOYLS/BzNCOA9S40ZrIrJQSx+" crossorigin="anonymous">

    <title>مرحبًا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبًا بالعالم!</h1>

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

    <!-- Option 1: Bootstrap Bundle with Floating UI and Vanilla Calendar Pro -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HqhmPYCPdcak5n3jxzwQD5I2Jj6IRwd1IEYpDlBYsaYA31TvxQzNc35N1plQLUr/" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Floating UI, Vanilla Calendar Pro, and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.0/dist/floating-ui.dom.umd.min.js" integrity="sha384-R7p1RqabZNhI+RdPNIzTouzd/LBVorZ0Tn3ApcogSOk+HF3o+P0HIenrUw/n0MOj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.1.0/index.js" integrity="sha384-uufJjV19/4zCvBe4t3zJFWdYpBIrAC78Ef5NN2i4VjmTowSYuAx+m56vF6ccI4V3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-8wPXX2sjGo1YKrlnc6Taml8vUw182WyKto06UStb242cTbvmAcuoe1xhsNxf4Ru/" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL examples

Get started with one of our several RTL examples.

Switching directions

Need both LTR and RTL on the same page? Wrap your content in containers with different dir attributes:

HTML
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/css/bootstrap.min.css" integrity="sha384-m2xeNCAimonB5eQyLA3FRVMemLPuy43SmG04XRRzOYLS/BzNCOA9S40ZrIrJQSx+" crossorigin="anonymous">
    <title>LTR and RTL</title>
  </head>
  <body>
    <!-- LTR content -->
    <div dir="ltr" lang="en">
      <h1>This is left-to-right text</h1>
      <p>Content flows from left to right.</p>
    </div>

    <!-- RTL content -->
    <div dir="rtl" lang="ar">
      <h1>هذا نص من اليمين إلى اليسار</h1>
      <p>المحتوى يتدفق من اليمين إلى اليسار.</p>
    </div>
  </body>
</html>

Additional resources