Skip to Content
BootstrapPartie 12 — Accessibilité & RTL12.2 — RTL (droite à gauche)

12.2 — RTL (droite à gauche)

⏱️ TL;DR — Bootstrap 5 supporte officiellement le RTL (arabe, hébreu, persan…). Deux réglages : dir="rtl" + lang sur <html>, et le CSS bootstrap.rtl.css. Grâce aux classes logiques start/end (au lieu de left/right), la plupart du markup fonctionne dans les deux sens sans modification.

🎯 Objectifs

  • Activer le RTL.
  • Comprendre pourquoi start/end facilite le RTL.
  • Concevoir un markup « bidirectionnel ».

Activer le RTL

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <link href=".../bootstrap.rtl.min.css" rel="stylesheet">
  </head>
  <body>…</body>
</html>

Deux ingrédients : l’attribut dir="rtl" (+ lang) et la feuille RTL (bootstrap.rtl.css), qui est le miroir du CSS normal.

Pourquoi start/end change tout

Depuis la v5, Bootstrap utilise des propriétés logiques :

Physique (à éviter)Logique (RTL-friendly)
ml-3 / mr-3ms-3 / me-3
text-left / text-righttext-start / text-end
float-left / float-rightfloat-start / float-end
border-leftborder-start

start = début de lecture (gauche en LTR, droite en RTL) ; end = fin. En utilisant ces classes, votre mise en page s’inverse automatiquement selon dir.

Générer le CSS RTL en Sass

Le RTL est produit par l’outil RTLCSS lors du build de Bootstrap. Si vous compilez votre propre Sass, générez une version RTL avec RTLCSS (postcss) à partir de votre CSS compilé.

Contenu bidirectionnel

Une même page peut mêler des zones LTR et RTL en posant dir localement :

<blockquote dir="rtl" lang="ar">نص عربي</blockquote>
<p dir="ltr">Texte latin</p>

Ce à quoi faire attention

  • Icônes directionnelles (flèches « suivant/précédent ») : elles doivent s’inverser — vérifiez vos carrousels et paginations.
  • Nombres et code restent LTR même en contexte RTL.
  • Images/logos : certains ne doivent pas être mis en miroir.

⚠️ Piège — Utiliser encore ml-*/mr-* (v4) « par habitude » : en RTL, elles ne s’inversent pas et cassent la mise en page. Bannissez le physique, utilisez ms-*/me-*.

💡 Pour un dev React — Si votre app doit gérer plusieurs langues dont l’arabe, basez toute votre UI sur start/end dès le départ : ajouter le RTL revient alors à basculer dir et la feuille RTL, sans réécrire les composants. C’est un choix d’architecture, pas un patch de dernière minute.

✏️ Exercices

  1. Quels deux réglages activent le RTL sur une page ?

✅ Solution

dir="rtl" (+ lang) sur <html>, et charger bootstrap.rtl.css.

  1. Pourquoi remplacer ml-3 par ms-3 ?

✅ Solution

ms-3 (margin-start) s’inverse automatiquement en RTL ; ml-3 (physique) non.

🧠 Quiz de révision

1. Quel attribut HTML active la direction RTL ?

dir="rtl".

2. Quelle feuille CSS charger pour le RTL ?

bootstrap.rtl.css.

3. Que signifie start en RTL ?

Le début de lecture = la droite.

4. Quel outil génère le CSS RTL ?

RTLCSS.

5. Les nombres s’inversent-ils en RTL ?

Non, ils restent en LTR.

🎉 Fin de la Partie 12 ! Partie suivante : Partie 13 — Optimisation & mise en production

12.1 — AccessibilitéVue d'ensemble