Skip to main content Skip to docs navigation
Ver en GitHub

RTL

Aprende cómo habilitar el soporte para texto de derecha a izquierda (RTL) en Bootstrap en todo nuestro diseño, componentes y utilidades.

En esta página

Familiarízate

Recomendamos familiarizarse primero con Bootstrap leyendo nuestra página de introducción a los primeros pasos. Una vez que la hayas revisado, continúa leyendo aquí sobre cómo habilitar RTL.

También es posible que desees leer sobre el proyecto RTLCSS, ya que impulsa nuestro enfoque para RTL.

La función RTL de Bootstrap aún es experimental y evolucionará en función de los comentarios de los usuarios. ¿Has detectado algo o tienes alguna mejora que sugerir? Abre un problema (issue), nos encantaría conocer tus opiniones.

HTML requerido

Existen dos requisitos estrictos para habilitar RTL en páginas impulsadas por Bootstrap.

  1. Establece dir="rtl" en el elemento <html>.
  2. Agrega un atributo lang apropiado, como lang="ar", en el elemento <html>.

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" 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>
    <!-- Etiquetas meta requeridas -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS de Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" crossorigin="anonymous">

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

    <!-- JavaScript opcional; ¡elige uno de los dos! -->

    <!-- Opción 1: Bootstrap Bundle con Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

    <!-- Opción 2: Popper y Bootstrap JS separados -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Ejemplos RTL

Comienza con uno de nuestros varios ejemplos RTL.

Enfoque

Nuestro enfoque para incorporar el soporte RTL en Bootstrap viene con dos decisiones importantes que afectan la forma en que escribimos y usamos nuestro CSS:

  1. Primero, decidimos construirlo con el proyecto RTLCSS. Esto nos brinda algunas características potentes para administrar cambios y anulaciones al pasar de LTR a RTL. También nos permite compilar dos versiones de Bootstrap a partir de una única base de código.

  2. Segundo, hemos cambiado el nombre de un puñado de clases direccionales para adoptar un enfoque de propiedades lógicas. La mayoría de ustedes ya han interactuado con las propiedades lógicas gracias a nuestras utilidades de flexbox: reemplazan las propiedades de dirección como left y right a favor de start y end. Eso hace que los nombres y valores de las clases sean apropiados para LTR y RTL sin ninguna sobrecarga.

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

Sin embargo, trabajar con RTL, a través de nuestro Sass de origen o CSS compilado, no debería ser muy diferente de nuestro LTR predeterminado.

Personalizar desde el código fuente

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

Valores RTL personalizados

Usando las directivas de valor RTLCSS, puedes hacer que una variable genere un valor diferente para RTL. Por ejemplo, para disminuir el grosor 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 que generaría lo siguiente para nuestro CSS predeterminado y CSS RTL:

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

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

Pila de fuentes alternativa

En el caso de que estés utilizando una fuente personalizada, ten en cuenta que no todas las fuentes admiten el alfabeto no latino. Para cambiar de la familia paneuropea a la árabe, es posible que debas usar /*rtl:insert: {value}*/ en tu pila de fuentes (font stack) para modificar los nombres de las familias de fuentes.

Por ejemplo, para cambiar de la fuente Helvetica Neue para LTR a Helvetica Neue Arabic para RTL, tu código Sass podría verse así:

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // Familia de fuentes genérica multiplataforma (fuente de interfaz de usuario predeterminada)
  system-ui,
  // Safari para macOS e iOS (San Francisco)
  -apple-system,
  // Chrome < 56 para macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Respaldo web básico
  Arial,
  // Linux
  "Noto Sans",
  // Respaldo Sans serif
  sans-serif,
  // Fuentes de emojis
  "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 los mapas de cadenas (String Maps) de RTLCSS, esto es bastante sencillo. Envuelve tus @imports con una clase y establece una regla de cambio de nombre 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 sus archivos CSS tendrá el prefijo .ltr, y .rtl para 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 extremos y limitaciones conocidas a considerar al trabajar con una implementación combinada de LTR y RTL:

  1. Al cambiar entre .ltr y .rtl, asegúrate de agregar los atributos dir y lang correspondientes.
  2. Cargar ambos archivos puede ser un verdadero cuello de botella para el rendimiento: considera realizar alguna optimización y tal vez intentes cargar uno de esos archivos de forma asíncrona.
  3. Anidar estilos de esta manera evitará que nuestro mixin form-validation-state() funcione según lo previsto, por lo que requerirá que lo modifiques un poco por ti mismo. Consulta el problema n.º 31223.

¿Deseas automatizar este proceso y abordar varios casos extremos que involucran ambas direcciones dentro de una sola hoja de estilo? Entonces, considera usar PostCSS RTLCSS como un plugin de PostCSS para procesar tus archivos fuente. PostCSS RTLCSS utiliza RTLCSS entre bastidores para gestionar el proceso de cambio de dirección, pero separa las declaraciones invertidas en reglas con un prefijo diferente para LTR y RTL, algo que te permite tener ambas direcciones dentro del mismo archivo de hoja de estilo. Al hacer esto, puedes cambiar entre las orientaciones LTR y RTL simplemente cambiando el dir de la página (or incluso modificando una clase específica si configuras el plugin en consecuencia).

Aspectos importantes a tener en cuenta al utilizar PostCSS RTLCSS para crear una implementación combinada de LTR y RTL:

  1. Se recomienda agregar el atributo dir al elemento html. De esta manera, toda la página se verá afectada cuando cambies la dirección. Además, asegúrate de agregar el atributo lang en consecuencia.
  2. Tener un único paquete con ambas direcciones aumentará el tamaño de la hoja de estilo final (en promedio, en un 20%-30%): considera realizar alguna optimización.
  3. Ten en cuenta que PostCSS RTLCSS no es compatible con las directivas /* rtl:remove */ porque no elimina ninguna regla CSS. Debes reemplazar tus directivas /* rtl:remove */, /* rtl:begin:remove */ y /* rtl:end:remove */ con directivas /* rtl:freeze */, /* rtl:begin:freeze */ y /* rtl:end:freeze */ respectivamente. Estas directivas añadirán el prefijo de la dirección actual a las reglas o declaraciones deseadas, pero no crearán una contraparte RTL (el mismo resultado que las directivas remove en RTLCSS).

El caso de las migas de pan (breadcrumb)

El separador de migas de pan (breadcrumb) es el único caso que requiere su propia variable completamente nueva, a saber, $breadcrumb-divider-flipped, que por defecto es $breadcrumb-divider.

Recursos adicionales