Layout

El layout establece una estructura predecible para que el contenido se adapte a cada pantalla sin perder jerarquía ni legibilidad. En servicios públicos, una composición consistente permite recorrer formularios, requisitos y acciones con menos esfuerzo, tanto en móvil como en escritorio.

El Kit Digital incluye Bootstrap Grid v5.3.8 en su hoja de estilos. No es necesario instalar Bootstrap ni crear otra grilla: usa sus clases de layout directamente junto con los componentes del kit.

Cómo funciona la grilla

• .container centra el contenido, le da un ancho máximo según el viewport y conserva 12px de espacio lateral a cada lado.
• .row crea una fila flexible y compensa los gutters de sus columnas.
• Las columnas .col-1 a .col-12 dividen cada fila en doce partes; .col reparte el espacio disponible por igual.
• Las clases con breakpoint son mobile first: una clase como .col-md-6 aplica desde 768px en adelante. Antes de ese ancho, la columna ocupa toda la fila.

<div class="container">
  <div class="row gy-4">
    <div class="col-12 col-md-8">
      <article class="cl-card">
        <div class="cl-card__body">
          <h2 class="cl-card__title">Contenido principal</h2>
          <p class="cl-card__text">
            Esta columna usa 8 de las 12 unidades desde el breakpoint md.
          </p>
        </div>
      </article>
    </div>
    <div class="col-12 col-md-4">
      <article class="cl-card">
        <div class="cl-card__body">
          <h2 class="cl-card__title">Información de apoyo</h2>
          <p class="cl-card__text">
            En móvil, ambas columnas ocupan una fila completa.
          </p>
        </div>
      </article>
    </div>
  </div>
</div>

Contenedores y breakpoints

.container ocupa el ancho disponible en móvil. Desde 576px, su máximo crece para mantener líneas de lectura y bloques de contenido proporcionados. Usa .container-fluid solo cuando el contenido deba ocupar todo el ancho del viewport.

Columnas y gutters

Combina columnas para que cada fila sume hasta doce unidades. Cuando el contenido no requiere una proporción exacta, usa .col para repartir el espacio entre sus hermanos. Las clases g-* ajustan ambos ejes del gutter; gx-* solo el horizontal y gy-* solo el vertical.

Buenas prácticas

• Usa .container como contenedor principal de secciones y páginas; evita anidarlo dentro de otro .container.
• Mantén las columnas como hijos directos de .row. La fila administra el padding lateral que produce los gutters.
• Usa gy-* cuando la fila pueda envolver columnas en móvil. Así se conserva espacio vertical entre cada bloque.
• Reserva offset-* para composiciones puntuales, como centrar un bloque de lectura. No lo uses para corregir un orden de contenido incorrecto.
• Usa .row-cols-* cuando todos los elementos comparten el mismo ancho, por ejemplo, una grilla de tarjetas.
• No agregues valores de ancho, márgenes o gap arbitrarios para reemplazar la grilla. Las utilidades de Bootstrap ya incluidas resuelven distribución, alineación y gutters.

<div class="container">
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-4">
    <div>
      <article class="cl-card">
        <div class="cl-card__body">
          <h2 class="cl-card__title">Primer bloque</h2>
          <p class="cl-card__text">Una columna en móvil.</p>
        </div>
      </article>
    </div>
    <div>
      <article class="cl-card">
        <div class="cl-card__body">
          <h2 class="cl-card__title">Segundo bloque</h2>
          <p class="cl-card__text">Dos columnas desde md.</p>
        </div>
      </article>
    </div>
    <div>
      <article class="cl-card">
        <div class="cl-card__body">
          <h2 class="cl-card__title">Tercer bloque</h2>
          <p class="cl-card__text">Tres columnas desde lg.</p>
        </div>
      </article>
    </div>
  </div>
</div>

Accesibilidad

La grilla distribuye contenido, pero no define su significado ni su orden de lectura. La estructura HTML debe seguir teniendo sentido sin estilos y en pantallas pequeñas.

• Escribe el contenido en el orden en que debe leerse. No uses columnas, offsets u orden visual para cambiar una secuencia lógica.
• Usa elementos semánticos dentro de cada columna: main, section, article, encabezados y listas cuando corresponda.
• Mantén un ancho de lectura cómodo para bloques extensos; no conviertas un párrafo largo en una columna demasiado ancha solo porque hay espacio disponible.
• Verifica el reflujo al hacer zoom y en viewport estrecho. Ningún bloque debe requerir desplazamiento horizontal para leerse o accionarse.
• Conserva el foco visible y el orden natural de tabulación. La posición visual de una columna no debe alejar el foco de la acción o el contenido que explica.