Uso de las utilidades de Texto en Bootstrap

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

Alineación de texto

Realinea fácilmente el texto a los componentes con clases de alineación de texto. Para la alineación start, end, y center, hay clases responsive disponibles que utilizan los mismos puntos de interrupción del ancho del viewport que el sistema de cuadrícula.

HTML

    <p class="text-start">Comienza a alinear el texto en todos los tamaños de viewport.</p>
    <p class="text-center">Texto alineado al centro en todos los tamaños de viewport.</p>
    <p class="text-end">Texto alineado al final en todos los tamaños de viewport.</p>

    <p class="text-sm-end">Texto alineado al final en viewports de tamaño SM (pequeño) o más ancho.</p>
    <p class="text-md-end">Texto alineado al final en viewports de tamaño MD (mediano) o más ancho.</p>
    <p class="text-lg-end">Texto alineado al final en viewports de tamaño LG (grande) o más anchas.</p>
    <p class="text-xl-end">Texto alineado al final en viewports de tamaño XL (extra grande) o más anchas.</p>
    <p class="text-xxl-end">Texto alineado al final en viewports de tamaño XXL (extra extra grande) o más anchas.</p>

Nota

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 espaciado entre palabras sea más aleatorio y, por lo tanto, más difícil de leer.

Ajuste y desbordamiento de texto

Ajustar texto con una clase .text-wrap.

HTML

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

HTML

    <div class="text-nowrap bg-body-secondary border" 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 más común overflow-wrap para una mayor compatibilidad con el navegador, y agregamos el obsoleto word-break: break-word para evitar problemas con los contenedores flex.

HTML

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

Precaución

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.

HTML

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

Observa cómo .text-capitalize solo cambia la primera letra de cada palabra, sin afectar el caso de cualquier otra letra.

Tamaño de fuente

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

HTML

    <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-size disponibles modificando el mapa $font-sizes de Sass.

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

HTML

    <p class="fw-bold">Texto en negrita.</p>
    <p class="fw-bolder">Texto con peso en negrita (en relación con el elemento principal).</p>
    <p class="fw-semibold">Texto de peso en seminegrita.</p>
    <p class="fw-medium">Texto de peso medio.</p>
    <p class="fw-normal">Texto de peso normal.</p>
    <p class="fw-light">Texto liviano.</p>
    <p class="fw-lighter">Texto más liviano (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>

Alto de línea

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

HTML

    <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

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

HTML

    <p class="font-monospace">Esto es en monoespacio.</p>

Restablecer color

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

HTML

    <p class="text-body-secondary">
        Texto del cuerpo secundario con un <a href="#" class="text-reset">enlace de restablecimiento</a>.
    </p>

Decoración de texto

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

HTML

    <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">Este enlace tiene su decoración de texto eliminada</a>

Personalización del CSS

Variables Sass generales relacionadas

Tipo predeterminado y variables Sass relacionadas con la fuente:

scss/_variables.scss

scss/_variables.scss

// 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-medium:          500;
$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 de Sass

Las utilidades de tamaño de fuente se generan a partir de este mapa, en combinación con nuestra API de utilidades.

scss/_variables.scss

scss/_variables.scss

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

scss/_maps.scss

scss/_maps.scss

$theme-colors-text: (
  "primary": $primary-text-emphasis,
  "secondary": $secondary-text-emphasis,
  "success": $success-text-emphasis,
  "info": $info-text-emphasis,
  "warning": $warning-text-emphasis,
  "danger": $danger-text-emphasis,
  "light": $light-text-emphasis,
  "dark": $dark-text-emphasis,
);

API de utilidades de Sass

Las utilidades de fuentes y texto se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.

scss/_utilities.scss

scss/_utilities.scss

"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: (
    lighter: $font-weight-lighter,
    light: $font-weight-light,
    normal: $font-weight-normal,
    medium: $font-weight-medium,
    semibold: $font-weight-semibold,
    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
),