Texto

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

🎉 ¡La traducción de Bootstrap 5.3 ya se encuentra disponible! (Estás en Bootstrap 5.1)
😎 Esta traducción es parte del proyecto esdocu.com.

En esta página

Alineación del texto

Realinea fácilmente el texto de los componentes con clases de alineación de texto. Para la alineación start, end y center, hay disponibles clases de respuesta que usan los mismos breakpoints de ancho de viewport que el sistema de cuadrícula.

Alineación de texto 'start' en todos los tamaños de viewport.

Alineación de texto 'center' en todos los tamaños de viewport.

Alineación de texto 'end' en todos los tamaños de viewport.

Alineación de texto 'start' en ventanas de tamaño SM (pequeño) o más ancho.

Alineación de texto 'start' en ventanas de tamaño MD (mediano) o más ancho.

Alineación de texto 'start' en ventanas de tamaño LG (grande) o más anchas.

Alineación de texto 'start' en ventanas de tamaño XL (extra grande) o más anchas.

<p class="text-start">Alineación de texto 'start' en todos los tamaños de viewport.</p>
<p class="text-center">Alineación de texto 'center' en todos los tamaños de viewport.</p>
<p class="text-end">Alineación de texto 'end' en todos los tamaños de viewport.</p>

<p class="text-sm-start">Alineación de texto 'start' en ventanas de tamaño SM (pequeño) o más ancho.</p>
<p class="text-md-start">Alineación de texto 'start' en ventanas de tamaño MD (mediano) o más ancho.</p>
<p class="text-lg-start">Alineación de texto 'start' en ventanas de tamaño LG (grande) o más anchas.</p>
<p class="text-xl-start">Alineación de texto 'start' en ventanas de tamaño XL (extra grande) o más anchas.</p>

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

Ajuste de texto y desbordamiento

Envuelve el texto con una clase .text-wrap.

Este texto debe ajustarse.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  Este texto debe ajustarse.
</div>

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

Este texto debe desbordar al padre.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  Este texto debe desbordar al padre.
</div>

Salto de palabra

Evita que largas cadenas de texto rompan el diseño de tus componentes usando .text-break para configurar word-wrap: break-word y word-break: break-word. Usamos word-wrap en lugar del overflow-wrap más común para una mayor compatibilidad con los navegadores, y agregamos el obsoleto word-break: break-word para evitar problemas con los contenedores flexibles.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

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

Transformación de texto

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

Texto en minúsculas.

Texto en mayúsculas.

Texto con primEras letras en mayúsculas.

<p class="text-lowercase">Texto en minúsculas.</p>
<p class="text-uppercase">Texto en mayúsculas.</p>
<p class="text-capitalize">Texto con primEras letras en mayúsculas.</p>

Ten en cuenta que .text-capitalize solo cambia la primera letra de cada palabra, dejando intactas las mayúsculas y minúsculas de cualquier otra letra.

Tamaño de fuente

Cambia rápidamente el font-size del texto. Mientras que nuestras clases de encabezado (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

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

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

Peso de fuente y cursiva

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

Texto en negrita.

Texto en negrita (relativo al elemento principal).

Texto de peso normal.

Texto liviano.

Texto más ligero (en relación con el elemento principal).

Texto en cursiva.

Texto con estilo de fuente normal

<p class="fw-bold">Texto en negrita.</p>
<p class="fw-bolder">Texto en negrita (relativo al elemento principal).</p>
<p class="fw-normal">Texto de peso normal.</p>
<p class="fw-light">Texto liviano.</p>
<p class="fw-lighter">Texto más ligero (en relación con el elemento principal).</p>
<p class="fst-italic">Texto en cursiva.</p>
<p class="fst-normal">Texto con estilo de fuente normal</p>

Altura de la línea

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

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

<p class="lh-1">Este es un párrafo largo escrito para mostrar cómo nuestras utilidades afectan la altura de línea de un elemento. Las clases se aplican al elemento mismo o, a veces, al elemento principal. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidad.</p>
<p class="lh-sm">Este es un párrafo largo escrito para mostrar cómo nuestras utilidades afectan la altura de línea de un elemento. Las clases se aplican al elemento mismo o, a veces, al elemento principal. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidad.</p>
<p class="lh-base">Este es un párrafo largo escrito para mostrar cómo nuestras utilidades afectan la altura de línea de un elemento. Las clases se aplican al elemento mismo o, a veces, al elemento principal. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidad.</p>
<p class="lh-lg">Este es un párrafo largo escrito para mostrar cómo nuestras utilidades afectan la altura de línea de un elemento. Las clases se aplican al elemento mismo o, a veces, al elemento principal. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidad.</p>

Monospace

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

Esto está en monospace

<p class="font-monospace">Esto está en monospace</p>

Restablecer color

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

Texto silenciado con un vínculo de reinicio.

<p class="text-muted">
  Texto silenciado con un <a href="#" class="text-reset">vínculo de reinicio</a>.
</p>

Decoración de texto

Decora 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.

Se ha quitado la decoración de texto de este enlace

<p class="text-decoration-underline">Este texto tiene una línea debajo.</p>
<p class="text-decoration-line-through">Este texto tiene una línea que lo atraviesa.</p>
<a href="#" class="text-decoration-none">Se ha quitado la decoración de texto de este enlace</a>

Sass

Variables

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", 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(--#{$variable-prefix}font-sans-serif);
$font-family-code:            var(--#{$variable-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-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 tamaño de fuente 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 fuentes y texto se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a usar la API de utilidades.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$variable-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,
        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
    ),

🎉 ¡La traducción de Bootstrap 5.3 ya se encuentra disponible! (Estás en Bootstrap 5.1)
😎 Esta traducción es parte del proyecto esdocu.com.