Programa completo

Bootstrap 5
desde cero

Creá interfaces responsive con la grilla, las utilidades y los componentes de Bootstrap 5.

18 clases4 módulos7–8 h duración

Maquetar más rápido

Usá la grilla y las utilidades sin perder el control del diseño.

Integrá navegación, tarjetas, formularios y modales con sentido.

Adaptá colores, espacios y variables a la identidad de cada proyecto.

PROGRAMA COMPLETO

Cada clase incluye explicación, ejemplo, práctica, solución orientativa y una comprobación breve.

Acercá el mouse o tocá una clase para leer su mini reseña.

Completá 5 clases prácticas de primeros pasos.

01Qué es Bootstrap 5
MINI RESEÑA
Bootstrap es un sistema de estilos y componentes reutilizables; acelera el armado de interfaces sin reemplazar los fundamentos de HTML y CSS.
02Instalación por CDN y npm
MINI RESEÑA
CDN permite comenzar sin herramientas, mientras npm integra Bootstrap al proceso de compilación y facilita controlar versiones.
03Contenedores y breakpoints
MINI RESEÑA
Los contenedores centran el contenido y cambian su ancho máximo en los breakpoints definidos por Bootstrap.
04Sistema de grillas
MINI RESEÑA
La grilla se organiza en contenedores, filas y doce columnas; los gutters separan el contenido sin romper la alineación.
05Columnas responsive
MINI RESEÑA
Los prefijos col-sm, col-md y col-lg permiten cambiar la cantidad de columnas según el espacio disponible.

Completá 4 clases prácticas de utilidades.

06Espaciado y tamaños
MINI RESEÑA
Las utilidades m, p, gap, w y h aplican una escala coherente sin crear una regla CSS para cada ajuste.
07Colores y tipografía
MINI RESEÑA
Las clases de color y texto comunican jerarquía, pero siempre deben conservar contraste y significado.
08Flexbox con utilidades
MINI RESEÑA
d-flex, justify-content y align-items resuelven alineaciones frecuentes sin escribir un selector adicional.
09Display y posicionamiento
MINI RESEÑA
Las utilidades de display y position deben usarse con moderación para no ocultar contenido esencial ni sacar elementos del flujo sin necesidad.

Completá 5 clases prácticas de componentes.

10Botones y grupos
MINI RESEÑA
Los botones combinan estilo visual, tamaño y estado; el elemento HTML debe seguir representando una acción real.
11Navbar responsive
MINI RESEÑA
La navbar colapsable necesita un botón asociado al contenedor y el JavaScript de Bootstrap para actualizar su estado.
12Cards
MINI RESEÑA
Una card agrupa contenido relacionado; sus secciones son opcionales y no sustituyen la semántica del documento.
13Formularios
MINI RESEÑA
Bootstrap mejora la presentación de etiquetas, campos y mensajes, pero la validación y la accesibilidad siguen dependiendo del HTML correcto.
14Alertas y modales
MINI RESEÑA
Alertas y modales comunican cambios importantes; deben poder cerrarse, recibir foco y no bloquear al usuario innecesariamente.

Completá 4 clases prácticas de personalización y proyecto.

15Variables CSS de Bootstrap
MINI RESEÑA
Las variables CSS permiten ajustar colores y componentes en tiempo de ejecución sin recompilar toda la biblioteca.
16Personalización con Sass
MINI RESEÑA
Al importar los archivos Sass se pueden modificar mapas y variables antes de generar una versión propia de Bootstrap.
17Accesibilidad en componentes
MINI RESEÑA
Los componentes necesitan nombres accesibles, foco visible, orden lógico y pruebas con teclado además de sus clases visuales.
18Landing page final
MINI RESEÑA
Una landing con Bootstrap debe combinar grilla, componentes y utilidades con una identidad propia y una estructura semántica.

PROYECTO FINAL

Creá una landing profesional, responsive y personalizada.

SIGUIENTE PASO

Cuando tu matrícula esté activa, vas a poder entrar al aula y guardar el progreso de cada clase.