Introducción
Qué es Bootstrap, cómo funciona y cómo lo usarás en proyectos.
Ver lecciónLecciones del curso
Ir a recursos
Aquí tienes el orden recomendado (según tus videos). Cada botón te lleva a la lección.
(Puedes crear cada lección como un HTML: 01-introduccion.html, 02-instalacion.html, etc.)
Instalación y uso
CDN, estructura base, contenedores y primeros componentes.
Ver lecciónRejilla y diagramación
Grid system: rows, cols, breakpoints y layouts.
Ver lecciónUtilidades para diagramación
Display, flex, align, spacing y helpers para maquetar rápido.
Ver lecciónRejillas complejas
Combinaciones avanzadas del grid para diseños profesionales.
Ver lecciónRejillas responsive
Diseño adaptable por dispositivos (sm, md, lg, xl, xxl).
Ver lecciónTipografía y tablas
Textos, títulos, clases, tablas y estilos listos.
Ver lecciónImágenes y figuras
Imagen responsive, thumbnails, figuras y helpers.
Ver lecciónAvisos e insignias
Alerts, badges y mensajes llamativos para UI.
Ver lecciónMigajas de pan y botones
Breadcrumbs, botones, grupos y estilos.
Ver lecciónFormularios
Inputs, selects, validation, layout de forms.
Ver lecciónEntradas complejas
Input groups, addons, combinaciones y casos reales.
Ver lecciónBarra de navegación
Navbar responsive, menús, collapse y links.
Ver lecciónPaginación y progreso
Pagination, progress bars y estados.
Ver lecciónModales
Modal básico, tamaños, eventos y buenas prácticas.
Ver lecciónTooltips
Tooltips, popovers e interacción con JS.
Ver lecciónBordes y sombras
Borders, shadows, rounded y detalles pro.
Ver lecciónEspaciado
Margin, padding, gap y control de espacios.
Ver lecciónExtendiendo Bootstrap
Cómo personalizar y hacer tu estilo con Bootstrap.
Ver lecciónFilosofía de clases
Cómo pensar Bootstrap: utilidades + componentes.
Ver lecciónPantalla de inicio
Arma una landing completa con estructura profesional.
Ver lecciónCalculador
Mini proyecto práctico usando componentes de Bootstrap.
Ver lecciónPromociones
Sección de promociones/cards, CTA y bloques comerciales.
Ver lección