Utilidades

Las utilidades hacen una sola cosa (centrar un texto, quitar un margen, ocultar algo en móvil) y se combinan en el HTML. Van en la última capa del kit (ds.utilities), así que ganan a los estilos de cualquier componente: <div class="message message--info mb-0"> quita el margen del mensaje.

Prioridad

Las utilidades no llevan !important. El CSS de tu sitio va sin capa y siempre gana: si una regla tuya define la misma propiedad en ese elemento (por ejemplo, .hero__title { text-align: left }), text-center no se aplica. Quita la propiedad de tu regla o deja que la utilidad decida.

Hay dos excepciones, porque ocultar no puede depender del orden del CSS:

• El atributo hidden (en el reset del kit).
• visually-hidden y visually-hidden-focusable.

Llevan !important y, al estar en una capa, ganan incluso a las reglas !important de tu sitio. Para mostrar el elemento, quita el atributo o la clase.

Ocultar

Para ocultar un elemento a todos (también a los lectores de pantalla), usa el atributo hidden. Funciona aunque una clase defina display, como btn o row. No hace falta una clase.

<section class="card" hidden>…</section>

visually-hidden oculta un texto a la vista, pero no a los lectores de pantalla. Sirve para completar un enlace poco descriptivo o para nombrar un botón con solo un ícono.

MóvilTabletEscritorioCompleto

HTML

<a href="#">Leer más<span class="visually-hidden"> sobre diseño web</span></a>
<button type="button" class="btn btn--primary btn--icon">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg>
  <span class="visually-hidden">Buscar</span>
</button>

React

export default function UtilidadesVisuallyHidden() {
  return (
    <>
      <a href="#">Leer más<span className="visually-hidden"> sobre diseño web</span></a>
      <button type="button" className="btn btn--primary btn--icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg>
        <span className="visually-hidden">Buscar</span>
      </button>
    </>
  );
}

visually-hidden-focusable se ve al recibir el foco. Es la clase del enlace «Saltar al contenido»: va primero en la página y lleva al id del contenido principal.

MóvilTabletEscritorioCompleto

HTML

<a class="btn btn--primary visually-hidden-focusable mb-3" href="#contenido">Saltar al contenido</a>
<p id="contenido">Pulsa Tab hasta llegar a la vista previa: el enlace aparece al recibir el foco.</p>

React

export default function UtilidadesSaltar() {
  return (
    <>
      <a className="btn btn--primary visually-hidden-focusable mb-3" href="#contenido">Saltar al contenido</a>
      <p id="contenido">Pulsa Tab hasta llegar a la vista previa: el enlace aparece al recibir el foco.</p>
    </>
  );
}

Para ocultar según el ancho de la pantalla, usa display: d-none y d-{bp}-none.

Texto

Alineación

text-start, text-center y text-end. Usan propiedades lógicas: inicio y fin siguen la dirección del texto (en árabe o hebreo, text-start va a la derecha).

MóvilTabletEscritorioCompleto

HTML

<p class="text-start">text-start: al inicio de la línea.</p>
<p class="text-center">text-center: centrado.</p>
<p class="text-end">text-end: al final de la línea.</p>

React

export default function UtilidadesAlineacion() {
  return (
    <>
      <p className="text-start">text-start: al inicio de la línea.</p>
      <p className="text-center">text-center: centrado.</p>
      <p className="text-end">text-end: al final de la línea.</p>
    </>
  );
}

text-{bp}-{alineación} aplica la alineación desde ese breakpoint. Por ejemplo, un título centrado en móvil y al inicio en escritorio. Prueba los anchos Móvil y Escritorio.

MóvilTabletEscritorioCompleto

HTML

<h2 class="text-center text-md-start">Conversemos sobre tu proyecto</h2>
<p class="text-center text-md-start">Centrado en móvil y al inicio desde md.</p>

React

export default function UtilidadesAlineacionResponsiva() {
  return (
    <>
      <h2 className="text-center text-md-start">Conversemos sobre tu proyecto</h2>
      <p className="text-center text-md-start">Centrado en móvil y al inicio desde md.</p>
    </>
  );
}

Color

text-{rol} pinta el texto con el color del rol y text-muted, con el gris de los textos secundarios. Cambian color, así que también pintan los íconos SVG con stroke o fill en currentColor.

MóvilTabletEscritorioCompleto

HTML

<span class="text-primary">text-primary</span>
<span class="text-secondary">text-secondary</span>
<span class="text-success">text-success</span>
<span class="text-danger">text-danger</span>
<span class="text-warning">text-warning</span>
<span class="text-info">text-info</span>
<span class="text-muted">text-muted</span>

React

export default function UtilidadesColor() {
  return (
    <>
      <span className="text-primary">text-primary</span>
      <span className="text-secondary">text-secondary</span>
      <span className="text-success">text-success</span>
      <span className="text-danger">text-danger</span>
      <span className="text-warning">text-warning</span>
      <span className="text-info">text-info</span>
      <span className="text-muted">text-muted</span>
    </>
  );
}

MóvilTabletEscritorioCompleto

HTML

<ul class="ps-0 mb-0" style="list-style: none">
  <li class="mb-2">
    <svg class="text-success" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align: -0.25em"><path d="M21.8 10A10 10 0 1 1 17 3.34" /><path d="m9 11 3 3L22 4" /></svg>
    Asesoría de marketing
  </li>
  <li>
    <svg class="text-success" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align: -0.25em"><path d="M21.8 10A10 10 0 1 1 17 3.34" /><path d="m9 11 3 3L22 4" /></svg>
    Posicionamiento SEO
  </li>
</ul>

React

export default function UtilidadesColorIconos() {
  return (
    <ul className="ps-0 mb-0" style={{ listStyle: 'none' }}>
      <li className="mb-2">
        <svg className="text-success" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ verticalAlign: '-0.25em' }}><path d="M21.8 10A10 10 0 1 1 17 3.34" /><path d="m9 11 3 3L22 4" /></svg>
        Asesoría de marketing
      </li>
      <li>
        <svg className="text-success" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ verticalAlign: '-0.25em' }}><path d="M21.8 10A10 10 0 1 1 17 3.34" /><path d="m9 11 3 3L22 4" /></svg>
        Posicionamiento SEO
      </li>
    </ul>
  );
}

Recortar

text-truncate deja el texto en una línea y corta lo que sobra con puntos suspensivos. Necesita un ancho: funciona en elementos de bloque o inline-block.

MóvilTabletEscritorioCompleto

HTML

<p class="text-truncate mb-0" style="max-width: 18rem">Cómo elegir el hosting para la web de tu empresa sin pagar de más</p>

React

export default function UtilidadesTruncar() {
  return (
    <p className="text-truncate mb-0" style={{ maxWidth: '18rem' }}>Cómo elegir el hosting para la web de tu empresa sin pagar de más</p>
  );
}

Espaciado

m-* (margin) y p-* (padding) usan la escala de espacios del kit. El nombre es {propiedad}{lado}-{paso}, p. ej. mb-4 o px-2.

Paso	Valor
0	0
1	4 px (--ds-space-1)
2	8 px
3	12 px
4	16 px
5	24 px
6	32 px
7	48 px
8	64 px (--ds-space-8)
auto	Solo margin.

Lado	Propiedad
(ninguno)	Los cuatro lados: m-3, p-3.
x	Inicio y fin: margin-inline.
y	Arriba y abajo: margin-block.
t	Arriba: margin-block-start.
b	Abajo: margin-block-end.
s	Inicio: margin-inline-start (izquierda en español).
e	Fin: margin-inline-end.

Los lados sueltos ganan a los ejes y los ejes a la versión sin lado: en px-4 ps-0, el padding de inicio queda en 0. No tienen versión por breakpoint: para un espaciado que cambia con el ancho, usa el CSS de tu sitio.

MóvilTabletEscritorioCompleto

HTML

<div class="mb-2">mb-2</div>
<div class="mb-5">mb-5</div>
<div>Sin margen</div>

React

export default function UtilidadesMargin() {
  return (
    <>
      <div className="mb-2">mb-2</div>
      <div className="mb-5">mb-5</div>
      <div>Sin margen</div>
    </>
  );
}

MóvilTabletEscritorioCompleto

HTML

<div class="p-2 mb-3"><div>p-2</div></div>
<div class="px-6 py-4"><div>px-6 py-4</div></div>

React

export default function UtilidadesPadding() {
  return (
    <>
      <div className="p-2 mb-3"><div>p-2</div></div>
      <div className="px-6 py-4"><div>px-6 py-4</div></div>
    </>
  );
}

mx-auto centra un bloque con ancho y ms-auto, dentro de un flex, empuja el elemento al final.

MóvilTabletEscritorioCompleto

HTML

<div class="mx-auto mb-3" style="max-width: 14rem">mx-auto</div>
<div class="d-flex">
  <div>Logo</div>
  <div class="ms-auto">Menú</div>
</div>

React

export default function UtilidadesAuto() {
  return (
    <>
      <div className="mx-auto mb-3" style={{ maxWidth: '14rem' }}>mx-auto</div>
      <div className="d-flex">
        <div>Logo</div>
        <div className="ms-auto">Menú</div>
      </div>
    </>
  );
}

Para separar columnas, usa la grilla (row ya tiene gap).

Display

d-{valor} cambia el display: none, inline, inline-block, block, flex, inline-flex y grid. d-{bp}-{valor} lo aplica desde ese breakpoint. Para mostrar algo solo en escritorio, combínalas: d-none d-md-block. Prueba los anchos Móvil y Escritorio.

MóvilTabletEscritorioCompleto

HTML

<div class="d-md-none">Se ve hasta md (móvil)</div>
<div class="d-none d-md-block">Se ve desde md</div>

React

export default function UtilidadesDisplay() {
  return (
    <>
      <div className="d-md-none">Se ve hasta md (móvil)</div>
      <div className="d-none d-md-block">Se ve desde md</div>
    </>
  );
}

Al volver a mostrar un elemento, usa su display original: una row es flex, así que va d-none d-md-flex. Para alinear y separar columnas, usa los modificadores de la grilla; el kit no trae utilidades de flex.

Accesibilidad

• hidden, d-none y d-{bp}-none ocultan también a los lectores de pantalla y sacan el elemento del orden del tabulador.
• visually-hidden no sirve para elementos enfocables (el foco llegaría a algo invisible): para eso está visually-hidden-focusable.
• El texto de visually-hidden se lee pegado al anterior: deja el espacio dentro (<span class="visually-hidden"> sobre diseño web</span>).
• text-truncate corta el texto a la vista, pero los lectores de pantalla lo leen completo. Si la persona necesita verlo, muéstralo en otro lugar (p. ej. en la página de destino).
• Con los colores por defecto, quedan bajo el contraste AA (4,5:1) para texto normal sobre blanco: text-success (3,4:1; sirve para texto grande y para íconos, que piden 3:1), text-secondary y text-warning (1,6:1) y text-info (1,7:1), que no sirven ni para íconos. Para texto de esos roles, usa un mensaje o un badge en tono suave, o ajusta los colores en el tema.

Desde el sitio de Dreamsign

Sitio	Kit
.hidden	Atributo hidden.
.hidden-md	d-md-none.
.sr-only, .fa-sr-only, .visually-hidden	visually-hidden.
.hide-long-text	text-truncate.
.text-left, .text-right	text-start, text-end.
.text-center	Igual.
.text-primary, .text-success, .text-danger, .text-warning, .text-muted	Iguales (ahora con --ds-color-*).
.full-width	En botones, btn--block.
.position-static	Queda en el sitio.

Clases

Clase	Uso
visually-hidden	Oculta a la vista, no a los lectores de pantalla.
visually-hidden-focusable	Como visually-hidden, pero se ve con el foco.
text-start, text-center, text-end	Alineación del texto. Por breakpoint: text-{bp}-*.
text-{rol}	Color del texto: primary, secondary, success, danger, warning, info.
text-muted	Texto secundario (gris).
text-truncate	Una línea con puntos suspensivos.
m{lado}-{0…8}, m{lado}-auto	Margin. Lados: ninguno, x, y, t, b, s, e.
p{lado}-{0…8}	Padding, con los mismos lados.
d-{valor}	Display: none, inline, inline-block, block, flex, inline-flex, grid. Por breakpoint: d-{bp}-*.

Breakpoints ({bp}): sm 576 px, md 768 px, lg 992 px, xl 1200 px y xxl 1408 px, como en la grilla.