Right to Left support for Twitter Bootstrap 3

html

responsive-design

css

best-practices

byAnton Shumikhin·Nov 17, 2024

Switching to RTL support in Bootstrap 3 is made possible with RTLCSS. Install RTLCSS (npm install rtlcss), then use a quick command to convert Bootstrap's CSS: rtlcss bootstrap.css bootstrap-rtl.css. The next step, load the RTL styles based on the document direction in your HTML:

<link rel="stylesheet" href="bootstrap.css">
<script>
  if (document.dir === "rtl") {
    // Because who doesn't like a ready-made suit? 😉
    document.head.innerHTML += '<link rel="stylesheet" href="bootstrap-rtl.css">';
  }
</script>

The above script checks if the document direction is RTL, and if yep, it's party time! It dynamically injects the RTL stylesheet for you.

Utilize Bootstrap RTL libraries

To have your cake and eat it too, you can use bootstrap-rtl, a ready-made library crafted for RTL languages. For a ride in the park, use the CDN link:

<!-- Use the Bootstrap RTL version if document is RTL -->
<script>
  if (document.dir === "rtl") {
    // Walking on sunshine, oh oh! 🌞
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://cdn.example.com/bootstrap-rtl.min.css";
    document.head.appendChild(link);
  }
</script>

For a taste of the Middle East, bootstrap-3-arabic library graces your users with the beauty of Arabic fonts.

Precision control over RTL layouts

If the made-to-measure libraries don't fit, you can always tailor Bootstrap.css to meet specific RTL style rules. Specifically:

Tweak float properties: Replace float: left; with float: right;, 'cause if left was so right, it wouldn't be left, right?
Adjust margins and paddings: Limber up your CSS muscles and flip these values round.

Remember to keep these gems in a separate custom-rtl.css so they won’t be lost in an ocean of code.

Advantages of NuGet packages

The Twitter.Bootstrap.RTL package from NuGet is like the chocolate syrup to your .Net sundae. It bridges the gap between Bootstrap 3 and RTL languages, particularly for my air-conditioned buddies, the Arabic.

RTL support for different Bootstrap versions

Custom RTL solutions may need per-version tweaks to the Bootstrap.css. Make yourself a breadcrumbs trail so you don't get lost in the woods of version conflict.

Discover more RTL resources

Extend the horizon of your knowledge with RTL-bootstrap v3.2.0 and Persian Bootstrap, the sherlock holmes of RTL support.

Follow the white rabbit down the GitHub hole with https://github.com/Kaakati/Bootstrap-Arabic. The crown jewel of community recommendations.

Don't be a stranger to resources like rbootstrap.ir for enlightening details on Bootstrap rtl implementation.

Global direction setting

Don't forget to set dir="rtl" on <body> tag. Hosts the biggest bang for your buck and solves most text alignment issues.

<body dir="rtl">
  <!-- Nothing to see here, move along 🚀 -->
</body>

explain-codes / Html / Right to Left support for Twitter Bootstrap 3

Linked

Common Header / Footer with Static HTML



How to put a link on a button with bootstrap?



Use Fieldset Legend with Bootstrap



How to position a div scrollbar on the left hand side?



How to change the button text of ``?



Making a Bootstrap table column fit to content



Unicode character as bullet for list-item in CSS



Utilize Bootstrap RTL libraries Precision control over RTL layouts Advantages of NuGet packages RTL support for different Bootstrap versions Discover more RTL resources Global direction setting