Texto (Text)
Documentación y ejemplos de utilidades de texto comunes para controlar la alineación, el ajuste, el grosor y más.
Alineación del texto (Text alignment)
Realinea fácilmente el texto con clases de alineación de texto. Para la alineación al inicio, al final y al centro, están disponibles clases responsivas que utilizan los mismos puntos de interrupción de ancho de ventana gráfica que el sistema de cuadrícula.
Texto alineado al inicio en todos los tamaños de ventana gráfica.
Texto centrado en todos los tamaños de ventana gráfica.
Texto alineado al final en todos los tamaños de ventana gráfica.
Texto alineado al final en ventanas gráficas de tamaño SM (pequeño) o más anchas.
Texto alineado al final en ventanas gráficas de tamaño MD (mediano) o más anchas.
Texto alineado al final en ventanas gráficas de tamaño LG (grande) o más anchas.
Texto alineado al final en ventanas gráficas de tamaño XL (extra grande) o más anchas.
Texto alineado al final en ventanas gráficas de tamaño XXL (extra extra grande) o más anchas.
<p class="text-start">Texto alineado al inicio en todos los tamaños de ventana gráfica.</p>
<p class="text-center">Texto centrado en todos los tamaños de ventana gráfica.</p>
<p class="text-end">Texto alineado al final en todos los tamaños de ventana gráfica.</p>
<p class="text-sm-end">Texto alineado al final en ventanas gráficas de tamaño SM (pequeño) o más anchas.</p>
<p class="text-md-end">Texto alineado al final en ventanas gráficas de tamaño MD (mediano) o más anchas.</p>
<p class="text-lg-end">Texto alineado al final en ventanas gráficas de tamaño LG (grande) o más anchas.</p>
<p class="text-xl-end">Texto alineado al final en ventanas gráficas de tamaño XL (extra grande) o más anchas.</p>
<p class="text-xxl-end">Texto alineado al final en ventanas gráficas de tamaño XXL (extra 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 espaciado entre palabras sea más aleatorio y, por lo tanto, más difícil de leer.
Ajuste de línea y desbordamiento de texto (Text wrapping and overflow)
Ajusta el texto con una clase .text-wrap.
<div class="badge text-bg-primary text-wrap" style="width: 6rem;">
Este texto debería ajustarse.
</div>Evita que el texto se ajuste con una clase .text-nowrap.
<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
Este texto debería desbordar al padre.
</div>Salto de palabra (Word break)
Evita que cadenas largas de texto rompan el diseño de tus componentes utilizando .text-break para establecer word-wrap: break-word y word-break: break-word. Usamos word-wrap en lugar de overflow-wrap que es más común para una compatibilidad más amplia del navegador, y agregamos la propiedad en desuso word-break: break-word para evitar problemas con contenedores flex.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Ten en cuenta que romper 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 (Text transform)
Transforma el texto en los componentes con nuestras clases de mayúsculas y minúsculas: text-lowercase, text-uppercase o text-capitalize.
Texto en minúsculas.
Texto en mayúsculas.
Texto Con Mayúsculas Iniciales.
<p class="text-lowercase">Texto en minúsculas.</p>
<p class="text-uppercase">Texto en mayúsculas.</p>
<p class="text-capitalize">Texto Con Mayúsculas Iniciales.</p>Ten en cuenta que .text-capitalize solo cambia la primera letra de cada palabra, dejando el caso de cualquier otra letra sin afectar.
Tamaño de fuente (Font size)
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.
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-size disponibles modificando el mapa Sass $font-sizes.
Grosor de fuente y cursiva (Font weight and italics)
Cambia rápidamente el font-weight o el 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 un grosor más negrita (en relación con el elemento padre).
Texto seminegrita.
Texto de grosor medio.
Texto de grosor normal.
Texto ligero.
Texto de grosor más ligero (en relación con el elemento padre).
Texto en cursiva.
Texto con estilo de fuente normal
<p class="fw-bold">Texto en negrita.</p>
<p class="fw-bolder">Texto con un grosor más negrita (en relación con el elemento padre).</p>
<p class="fw-semibold">Texto seminegrita.</p>
<p class="fw-medium">Texto de grosor medio.</p>
<p class="fw-normal">Texto de grosor normal.</p>
<p class="fw-light">Texto ligero.</p>
<p class="fw-lighter">Texto de grosor más ligero (en relación con el elemento padre).</p>
<p class="fst-italic">Texto en cursiva.</p>
<p class="fst-normal">Texto con estilo de fuente normal</p>Altura de línea (Line height)
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 en sí o, a veces, al elemento padre. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidades.
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 en sí o, a veces, al elemento padre. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidades.
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 en sí o, a veces, al elemento padre. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidades.
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 en sí o, a veces, al elemento padre. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidades.
<p class="lh-1">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 en sí o, a veces, al elemento padre. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidades.</p>
<p class="lh-sm">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 en sí o, a veces, al elemento padre. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidades.</p>
<p class="lh-base">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 en sí o, a veces, al elemento padre. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidades.</p>
<p class="lh-lg">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 en sí o, a veces, al elemento padre. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidades.</p>Monoespaciado (Monospace)
Cambia una selección a nuestra pila de fuentes monoespaciadas con .font-monospace.
Esto está en monoespaciado
<p class="font-monospace">Esto está en monoespaciado</p>Restablecer color (Reset color)
Restablece el color de un texto o enlace con .text-reset, de modo que herede el color de su padre.
Texto del cuerpo secundario con un enlace de restablecimiento.
<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 (Text decoration)
Decora el texto en los 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 no tiene decoración de texto<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 no tiene decoración de texto</a>CSS
Variables Sass
Variables Sass predeterminadas relacionadas con el tipo y la fuente:
// 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 Sass
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
);
$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 fuente y texto se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar 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: (
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
),