Ejercicio de programación con Bootstrap: Fundamentos del sistema de grid de Bootstrap
Código
0h 15m
Aprende a crear una página utilizando el sistema grid de Bootstrap 5.3. Organiza contenido en filas y columnas adaptativas con breakpoints y espaciados personalizados.
Crea una página HTML que utilice el sistema de grid de Bootstrap para organizar el contenido de manera responsiva. La página debe cumplir con los siguientes requisitos:
- Utiliza un contenedor que se ajuste al ancho.
- Crea una fila con tres columnas.
- Cada columna debe tener un texto de ejemplo que indique su posición (por ejemplo, "Columna 1", "Columna 2", "Columna 3").
- En tamaños de pantalla pequeños las columnas deben apilarse verticalmente.
- En tamaños de pantalla medianos, cada columna debe ocupar la mitad del espacio, de modo que queden de dos en dos.
- En tamaños de pantalla grandes y superiores, las columnas deben disponerse en una fila horizontal.
- Añade un gutter horizontal de 3 entre las columnas y un gutter vertical de 1.
Todos los ejercicios de programación de Bootstrap
Evalúa tus conocimientos con ejercicios de programación en Bootstrap de tipo Test, Puzzle, Código y Proyecto con VSCode.
Listado y formulario de productos en Bootstrap CSS
Proyecto
Utilidades de colores y fondo
Código
Instalación de Bootstrap
Código
Página web completa con Bootstrap
Proyecto
Tipografía y fuentes en Bootstrap
Puzzle
Clases de utilidad
Código
Flexbox en Bootstrap
Puzzle
Utilidades de espaciado y alineación
Puzzle
Conocimiento general de Bootstrap
Código
Conocimiento general de Bootstrap
Test
Imágenes responsive en Bootstrap
Código
Proyecto blog de artículos con Bootstrap CSS
Proyecto
Introducción a Bootstrap
Test
Formularios y validación
Código
Modales y ventanas emergentes
Test
Navbars y menús de navegación en Bootstrap
Puzzle
Componentes de Bootstrap
Código
Certificados de superación de Bootstrap
Supera todos los retos de Bootstrap y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.
Tutorial para resolver este ejercicio de programación
Bootstrap
Fundamentos del sistema de grid de Bootstrap
Fundamentos y layout