Contenedor

.container centra el contenido y le deja espacio a los lados. Hasta 768 px ocupa todo el ancho; desde ahí crece por escalones, con un ancho máximo en cada breakpoint. Usa Escritorio en la vista previa para ver cómo se centra.

Básico

MóvilTabletEscritorioCompleto

HTML

<div class="container">
  <p>Contenido centrado con un ancho máximo.</p>
</div>

React

export default function ContenedorBasico() {
  return (
    <div className="container">
      <p>Contenido centrado con un ancho máximo.</p>
    </div>
  );
}

Breakpoint	Desde	Ancho máximo
—	0	100 %
md	768 px	768 px
lg	992 px	992 px
xl	1200 px	1200 px
xxl	1408 px	1408 px

El ancho máximo incluye el espacio a los lados (16 px).

Fluido

container--fluid siempre ocupa el ancho completo, pero mantiene el espacio a los lados.

MóvilTabletEscritorioCompleto

HTML

<div class="container container--fluid">
  <p>Contenido al ancho completo, con espacio a los lados.</p>
</div>

React

export default function ContenedorFluido() {
  return (
    <div className="container container--fluid">
      <p>Contenido al ancho completo, con espacio a los lados.</p>
    </div>
  );
}

Con la grilla

Lo habitual: una sección a todo el ancho (con su fondo), dentro un container y dentro la grilla.

MóvilTabletEscritorioCompleto

HTML

<section>
  <div class="container">
    <div class="row">
      <div class="column-sm-6">Columna</div>
      <div class="column-sm-6">Columna</div>
    </div>
  </div>
</section>

React

export default function ContenedorConGrilla() {
  return (
    <section>
      <div className="container">
        <div className="row">
          <div className="column-sm-6">Columna</div>
          <div className="column-sm-6">Columna</div>
        </div>
      </div>
    </section>
  );
}

Clases

Clase	Uso
container	Centra el contenido con un ancho máximo por breakpoint.
container--fluid	Siempre al ancho completo.

Variables

Para un contenedor más angosto (un artículo, por ejemplo), cambia --ds-container-max-width en tu propia clase.

Variable	Valor por defecto	Uso
--ds-container-max-width	100%	Ancho máximo. Hasta md es 100 %; desde md: 768, 992, 1200 y 1408 px.
--ds-container-padding-x	var(--ds-space-4)	Espacio a los lados.