Área de juego de cuadrícula Bootstrap
Crea diseños responsivos con la cuadrícula de Bootstrap 5.3 de forma visual y copia las clases exactas — row, col, desplazamientos, orden, márgenes internos y alineación.
—
Todo se ejecuta en tu navegador — no se sube nada.
Las clases que definas se aplican a partir de este punto de ruptura y hacia arriba. Cambia de punto de ruptura para crear diseños responsivos.
Acerca de Área de juego de cuadrícula Bootstrap
El Playground de Cuadrícula de Bootstrap construye diseños de filas y columnas responsivos con el sistema de cuadrícula real de Bootstrap 5.3. Añade hasta 12 columnas a una fila, haz clic en cualquier columna para establecer su ancho, desplazamiento y orden, y ajusta los espacios (gutters) y la alineación en la fila; la vista previa y el marcado generado se actualizan en vivo con cada cambio.
Como las cuadrículas de Bootstrap son mobile-first, el selector de punto de ruptura es fundamental: establece una columna como col-6 en la base y col-md-4 en md, y habrás construido el clásico patrón de apilarse en móvil y mostrarse en tres columnas en escritorio sin escribir una línea de código. Los desplazamientos, el orden y las clases de gutter aceptan todos los mismos infijos responsivos.
La salida es HTML limpio para copiar y pegar: un div de fila con sus columnas hijas y exactamente las clases que configuraste. Copia el fragmento completo o solo las clases de la fila; todo se ejecuta localmente en tu navegador.
Cómo usar Área de juego de cuadrícula Bootstrap
- Añade columnas a la fila (hasta 12) y haz clic en una para seleccionarla.
- Establece el ancho, el desplazamiento y el orden de la columna seleccionada para el punto de ruptura actual.
- Cambia de punto de ruptura (de sm a xxl) para definir cómo se reorganiza el diseño en pantallas más grandes.
- Ajusta los gutters de la fila y sus utilidades de alineación.
- Revisa la vista previa en vivo, luego copia el HTML generado o las clases de la fila.