Ver en GitHub

RTL

Aprende cómo habilitar el soporte para texto de derecha a izquierda en Bootstrap en nuestro layout, componentes y utilidades.

On this page

Familiarízate

Recomendamos familiarizarte primero con Bootstrap leyendo nuestra página de introducción Getting Started. Una vez que la hayas revisado, continúa leyendo aquí para saber cómo habilitar RTL.

También puede que quieras leer sobre el proyecto RTLCSS, ya que es la base de nuestro enfoque para RTL.

Funcionalidad experimental

La funcionalidad RTL sigue siendo experimental y probablemente evolucionará según los comentarios de los usuarios. ¿Has detectado algo o tienes una mejora que sugerir? Abre un issue, nos encantaría conocer tu opinión.

HTML requerido

Hay dos requisitos estrictos para habilitar RTL en páginas basadas en Bootstrap.

Establece dir="rtl" en el elemento <html>.
Añade un atributo lang apropiado, como lang="ar", en el elemento <html>.

A partir de ahí, necesitarás incluir una versión RTL de nuestro CSS. Por ejemplo, aquí está la hoja de estilos para nuestro CSS compilado y minificado con RTL habilitado:

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

Plantilla de inicio

Puedes ver los requisitos anteriores reflejados en esta plantilla de inicio RTL modificada.

<!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.1.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Ejemplos RTL

Empieza con uno de nuestros varios ejemplos RTL.

Enfoque

Nuestro enfoque para incorporar el soporte RTL en Bootstrap viene con dos decisiones importantes que impactan cómo escribimos y usamos nuestro CSS:

Primero, decidimos construirlo con el proyecto RTLCSS. Esto nos da algunas funcionalidades potentes para gestionar cambios y sobrescrituras al pasar de LTR a RTL. También nos permite construir dos versiones de Bootstrap a partir de una única base de código.
Segundo, hemos renombrado un puñado de clases direccionales para adoptar un enfoque de propiedades lógicas. La mayoría de vosotros ya habéis interactuado con las propiedades lógicas gracias a nuestras utilidades flex—reemplazan propiedades de dirección como left y right en favor de start y end. Esto hace que los nombres de las clases y los valores sean apropiados para LTR y RTL sin ninguna sobrecarga.

Por ejemplo, en lugar de .ml-3 para margin-left, usa .ms-3.

Trabajar con RTL, a través de nuestro Sass fuente o CSS compilado, no debería ser muy diferente de nuestro LTR por defecto.

Personalizar desde el código fuente

Cuando se trata de personalización, la forma preferida es aprovechar las variables, los maps y los mixins. Este enfoque funciona igual para RTL, incluso si se post-procesa a partir de los archivos compilados, gracias a cómo funciona RTLCSS.

Valores RTL personalizados

Usando las directivas de valor de RTLCSS, puedes hacer que una variable genere un valor diferente para RTL. Por ejemplo, para reducir el peso de $font-weight-bold en toda la base de código, puedes usar la sintaxis /*rtl: {value}*/:

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

Lo cual generaría lo siguiente para nuestro CSS por defecto y CSS RTL:

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

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

Pila de fuentes alternativa

En caso de que estés usando una fuente personalizada, ten en cuenta que no todas las fuentes soportan el alfabeto no latino. Para cambiar de la familia paneuropea a la árabe, puede que necesites usar /*rtl:insert: {value}*/ en tu pila de fuentes para modificar los nombres de las familias tipográficas.

Por ejemplo, para cambiar de Helvetica Neue Webfont para LTR a Helvetica Neue Arabic para RTL, tu código Sass se vería así:

$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;

LTR y RTL al mismo tiempo

¿Necesitas tanto LTR como RTL en la misma página? Gracias a RTLCSS String Maps, esto es bastante sencillo. Envuelve tus @import con una clase, y establece una regla de renombrado personalizada para 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*/

Después de ejecutar Sass y luego RTLCSS, cada selector en tus archivos CSS será precedido por .ltr, y por .rtl para los archivos RTL. Ahora puedes usar ambos archivos en la misma página, y simplemente usar .ltr o .rtl en los contenedores de tus componentes para usar una u otra dirección.

Casos especiales y limitaciones conocidas

Aunque este enfoque es comprensible, presta atención a lo siguiente:

Al cambiar entre .ltr y .rtl, asegúrate de añadir los atributos dir y lang en consecuencia.
Cargar ambos archivos puede ser un verdadero cuello de botella de rendimiento: considera alguna optimización, y quizás intenta cargar uno de esos archivos de forma asíncrona.
Anidar los estilos de esta manera impedirá que nuestro mixin form-validation-state() funcione como se espera, por lo que tendrás que ajustarlo un poco por tu cuenta. Ver #31223.

El separador del breadcrumb es el único caso que requiere su propia variable nueva, concretamente $breadcrumb-divider-flipped, cuyo valor por defecto es $breadcrumb-divider.

RTL