Área de juego flex de Bootstrap
Crea diseños flex de Bootstrap 5.3 de forma visual y copia las clases utilitarias exactas: d-flex, justify-content, align-items, order, grow y más.
—
Todo se ejecuta en tu navegador: no se sube nada.
Las clases que definas se aplican desde este punto de ruptura en adelante. Cambia de punto de ruptura para crear diseños responsivos.
Acerca de Área de juego flex de Bootstrap
El Playground de Flex de Bootstrap te permite construir diseños flexbox con clases de utilidad reales de Bootstrap 5.3 en lugar de CSS puro. Configura el contenedor (dirección, ajuste, justify-content, align-items, gap) con controles segmentados, haz clic en cualquier elemento para establecer su propio align-self, order, grow y shrink, y observa cómo la vista previa en vivo se reorganiza al instante.
El selector de punto de ruptura es lo que lo convierte en algo más que un juguete: elige sm, md, lg, xl o xxl y las clases que establezcas a partir de ese punto ganan el infijo responsivo (justify-content-md-between, flex-lg-row) exactamente como lo aplica el sistema mobile-first de Bootstrap desde ese punto de ruptura hacia arriba. Añade hasta 12 elementos para simular un componente realista.
Cuando el diseño se vea bien, copia el HTML generado o solo las clases del contenedor y pégalas directamente en tu proyecto. Todo se ejecuta en tu navegador y nada se sube.
Cómo usar Área de juego flex de Bootstrap
- Configura las utilidades del contenedor (dirección, ajuste, justify-content, align-items y gap) con los controles segmentados.
- Añade o elimina elementos (de 2 a 12) para igualar tu componente real.
- Haz clic en un elemento para darle sus propias utilidades de align-self, order o tamaño flex.
- Cambia de punto de ruptura para añadir variantes responsivas que se apliquen desde sm, md, lg, xl o xxl hacia arriba.
- Comprueba la vista previa en vivo, luego copia el HTML generado o las clases del contenedor.