Ayudantes de cuadrícula y columnas de Bootstrap

La cuadrícula incluida en POM utiliza filas y un sistema de 12 columnas.

<div class="row">
    <div class="col-12 col-md-8">Main content</div>
    <aside class="col-12 col-md-4">Sidebar</aside>
</div>

Las clases de columna están disponibles como col, col-1 hasta col-12 y las responsive col-sm-*, col-md-* y col-lg-*. Una clase se aplica en su breakpoint y por encima de él hasta que otra clase la anula. POM no genera un nivel de columna extra grande.

Eliminar los espacios entre columnas

Añade no-gutters a una fila cuando sus columnas inmediatas no deban tener relleno horizontal:

<div class="row no-gutters">
    <div class="col-6">First column</div>
    <div class="col-6">Second column</div>
</div>

Solo se admite no-gutters para eliminar los espacios entre columnas de la fila. Aplica un espaciado específico del componente cuando un diseño necesite espacios distintos al espacio estándar de la fila.

Posicionamiento responsive de empuje y tracción

Las columnas de la cuadrícula se posicionan de forma relativa, por lo que los ayudantes push-* y pull-* de POM pueden desplazarlas visualmente sin cambiar su orden en el documento. El sufijo numérico usa las mismas proporciones de 12 columnas que la cuadrícula:

<div class="row">
    <div class="col-6 push-md-6">Visually shifted right from the medium breakpoint</div>
    <div class="col-6 pull-md-6">Visually shifted left from the medium breakpoint</div>
</div>

Las variantes base son push-0 hasta push-12 y pull-0 hasta pull-12. Las variantes responsive usan los infijos sm, md y lg, por ejemplo push-sm-4, pull-md-6 o push-lg-2. La variante cero restaura la propiedad left o right correspondiente a auto.

Estos ayudantes solo cambian el posicionamiento visual. Mantén un orden de origen significativo para la navegación por teclado, los lectores de pantalla y los diseños estrechos, y prefiere el orden normal de columnas cuando el propio orden del contenido deba cambiar.

Usa push-* y pull-* para un desplazamiento visual intencionado, o asigna anchos de columna responsive explícitos a cada hijo cuando una fila necesite un número fijo de columnas. Las familias de clases de desplazamiento y de recuento automático de filas no se generan.

Planifica los anchos empezando por el móvil

Empieza con el ancho de pantalla más pequeño, normalmente col-12, y añade solo los breakpoints donde el diseño cambia de forma significativa. Los anchos de columna de una fila normalmente deberían sumar 12 en cada breakpoint, aunque el salto de línea es válido cuando un listado continúa intencionadamente en otra línea.

Las cuadrículas anidadas requieren una nueva .row dentro de una columna. No coloques una fila directamente dentro de otra fila, y no uses una columna sin fila solo para copiar su relleno. Comprueba el resultado inmediatamente alrededor de cada breakpoint y con el contenido realista más largo.

No coloques col-* fuera de una fila solo para obtener un ancho. Mantén un orden de origen significativo; la reorganización visual responsive no debe hacer confuso el orden de teclado o de lectura.