Bootstrap es un framework de HTML, CSS y Javascript que ayuda a construir interfaces responsive de forma rápida. En vez de empezar cada proyecto desde cero, Bootstrap ofrece una rejilla, estilos para botones, formularios, navegación y componentes interactivos.
Este curso migra la antigua introducción a Bootstrap a un formato interactivo: lee cada bloque, pulsa el botón de ejemplo, modifica el código en el editor y visualiza el resultado con .
Recomendado Si empiezas desde cero, completa primero el curso interactivo de HTML y ten a mano algunos libros de CSS.
La forma más sencilla de probar Bootstrap es cargar su CSS desde CDN dentro del <head>. Los componentes con comportamiento, como menús desplegables o paneles colapsables, también necesitan el fichero Javascript de Bootstrap antes de cerrar </body>.
En el artículo original se usaba Bootstrap 3.3.7. El curso usa Bootstrap 5 en los ejemplos principales, manteniendo también notas sobre clases clásicas como col-md-*, btn, well o navbar.
El contenido se organiza en filas y columnas. La idea clásica es dividir cada fila en 12 columnas: una cabecera puede ocupar 12, dos bloques pueden ocupar 6 y 6, y un pie puede dividirse en 4, 4 y 4.
En Bootstrap las filas se crean con row y las columnas con clases como col-md-6. El prefijo indica el punto de ruptura: sm, md, lg o xl.
Los botones parten de la clase btn. Después se añade una variante: btn-primary, btn-success, btn-warning, btn-danger o btn-info. Para avisos rápidos se usan alert y sus variantes.
En Bootstrap 3 se usaba mucho well para una caja gris. En Bootstrap 5 se suele sustituir por utilidades como p-4, bg-light y border.
Bootstrap aplica una base tipográfica consistente. La clase lead destaca un texto introductorio y las utilidades text-center, text-end, text-muted o fw-bold ayudan a ajustar la lectura sin escribir CSS propio.
Para listas limpias se puede usar list-unstyled. Para elementos en línea, Bootstrap 3 tenía list-inline; en Bootstrap 5 es frecuente usar d-flex y gap-*.
Una barra de navegación suele incluir marca, enlaces principales y, a veces, un buscador. La clase clásica navbar-brand identifica la marca y navbar-nav agrupa los enlaces.
En pantallas pequeñas el menú se puede colapsar y mostrar mediante un botón. Pulsa el ejemplo, visualiza el resultado y reduce el ancho de la ventana del visor para comprobar el comportamiento responsive.
Bootstrap incluye componentes que dependen de Javascript: collapse, dropdown, modales, pestañas, tooltips y carruseles. Normalmente se activan con atributos data-bs-*.
Por ejemplo, para un desplegable se usa data-bs-toggle="dropdown"; para colapsar una sección se usa data-bs-toggle="collapse" y data-bs-target="#id".
La antigua introducción terminaba con una plantilla para Blogger. El mismo planteamiento se puede practicar aquí con una estructura completa: barra superior, cabecera, zona principal con artículos, sidebar y footer.
El objetivo no es memorizar cada clase, sino entender cómo se combinan contenedores, filas, columnas y componentes para crear una página real.
Bootstrap 4 incorporó Flexbox, eliminó Glyphicons, añadió el punto de ruptura xl, popularizó las unidades rem y sustituyó varios componentes antiguos.
Bootstrap 5 eliminó la dependencia de jQuery, cambió muchos atributos a data-bs-*, reforzó las utilidades y modernizó la forma de trabajar con formularios, layout y componentes.
Como cierre, abre el ejemplo final y cambia colores, columnas, textos o botones. Es la mejor manera de pasar de "he leído Bootstrap" a "puedo construir con Bootstrap".