Texto

Documentación y ejemplos para utilidades de texto comunes para controlar la alineación, el ajuste, el peso y más.

On this page

Alineación de texto

Realinea fácilmente el texto a los componentes con clases de alineación de texto. Para alineación al inicio, al final y centrada, hay clases responsivas disponibles que usan los mismos breakpoints de ancho de viewport que el sistema de grid.

Texto alineado al inicio en todos los tamaños de viewport.

Texto alineado al centro en todos los tamaños de viewport.

Texto alineado al final en todos los tamaños de viewport.

Texto alineado al inicio en viewports de tamaño SM (small) o superior.

Texto alineado al inicio en viewports de tamaño MD (medium) o superior.

Texto alineado al inicio en viewports de tamaño LG (large) o superior.

Texto alineado al inicio en viewports de tamaño XL (extra-large) o superior.

html

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

Ten en cuenta que no proporcionamos clases utilitarias para texto justificado. Aunque, estéticamente, el texto justificado puede parecer más atractivo, hace que el espaciado entre palabras sea más aleatorio y, por lo tanto, más difícil de leer.

Ajuste de texto y desbordamiento

Ajusta el texto con una clase .text-wrap.

Este texto debería ajustarse.

html

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Evita que el texto se ajuste con una clase .text-nowrap.

Este texto debería desbordar el padre.

html

<div class="text-nowrap bg-light border" style="width: 8rem;">
  This text should overflow the parent.
</div>

Salto de palabra

Evita que cadenas largas de texto rompan el layout de tus componentes usando .text-break para establecer word-wrap: break-word y word-break: break-word. Usamos word-wrap en lugar del más común overflow-wrap para mayor compatibilidad con navegadores, y añadimos el obsoleto word-break: break-word para evitar problemas con contenedores flex.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Ten en cuenta que dividir palabras no es posible en árabe, que es el idioma RTL más utilizado. Por lo tanto, .text-break se elimina de nuestro CSS compilado para RTL.

Transformación de texto

Transforma el texto en componentes con clases de capitalización de texto.

Texto en minúsculas.

Texto en mayúsculas.

Texto CapiTaliZado.

html

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Observa cómo .text-capitalize solo cambia la primera letra de cada palabra, dejando la capitalización de las demás letras sin afectar.

Tamaño de fuente

Cambia rápidamente el font-size del texto. Mientras que nuestras clases de encabezados (p. ej., .h1–.h6) aplican font-size, font-weight, y line-height, estas utilidades solo aplican font-size. El tamaño de estas utilidades coincide con los elementos de encabezado de HTML, por lo que a medida que aumenta el número, su tamaño disminuye.

texto .fs-1

texto .fs-2

texto .fs-3

texto .fs-4

texto .fs-5

texto .fs-6

html

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Personaliza tus font-sizes disponibles modificando el mapa Sass $font-sizes.

Peso de fuente y cursivas

Cambia rápidamente el font-weight o font-style del texto con estas utilidades. Las utilidades de font-style se abrevian como .fst-* y las utilidades de font-weight se abrevian como .fw-*.

Texto en negrita.

Texto con peso más negrita (relativo al elemento padre).

Texto con peso semibold.

Texto con peso normal.

Texto con peso ligero.

Texto con peso más ligero (relativo al elemento padre).

Texto en cursiva.

Texto con estilo de fuente normal

html

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

Altura de línea

Cambia la altura de línea con las utilidades .lh-*.

Este es un párrafo largo escrito para mostrar cómo la altura de línea de un elemento se ve afectada por nuestras utilidades. Las clases se aplican al elemento mismo o a veces al elemento padre. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidades.

html

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>

Monoespaciado

Cambia una selección a nuestra pila de fuentes monospace con .font-monospace.

Esto está en monospace

html

<p class="font-monospace">This is in monospace</p>

Restablecer color

Restablece el color de un texto o enlace con .text-reset, para que herede el color de su padre.

Texto atenuado con un enlace restablecido.

html

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Decoración de texto

Decora el texto en componentes con clases de decoración de texto.

Este texto tiene una línea debajo.

Este texto tiene una línea que lo atraviesa.

Este enlace tiene su decoración de texto eliminada

html

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

Sass

Variables

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$prefix}font-monospace);

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-semibold:        600;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

Mapas

Las utilidades de font-size se generan a partir de este mapa, en combinación con nuestra API de utilidades.

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

API de utilidades

Las utilidades de fuente y texto se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende cómo usar la API de utilidades.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$prefix}font-monospace))
    ),
    "font-size": (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes
    ),
    "font-style": (
      property: font-style,
      class: fst,
      values: italic normal
    ),
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        semibold: $font-weight-semibold,
        bolder: $font-weight-bolder
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    "text-align": (
      responsive: true,
      property: text-align,
      class: text,
      values: (
        start: left,
        end: right,
        center: center,
      )
    ),
    "text-decoration": (
      property: text-decoration,
      values: none underline line-through
    ),
    "text-transform": (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    "white-space": (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    "word-wrap": (
      property: word-wrap word-break,
      class: text,
      values: (break: break-word),
      rtl: false
    ),