≡En resumen
- Bootstrap es un framework CSS y JavaScript gratuito para maquetar webs responsive con rapidez.
- Se basa en un grid de 12 columnas con seis puntos de ruptura, de menos de 576 px a 1.400 px o más.
- Incluye componentes listos: menús, botones, formularios, modales, carruseles, alertas o tarjetas.
- Desde la versión 5 no necesita jQuery y usa JavaScript nativo y variables CSS.
- Es ideal para prototipos y paneles; para diseños muy personalizados muchos equipos prefieren Tailwind CSS.
01 ¿Qué es Bootstrap?
Mark Otto y Jacob Thornton lo crearon en Twitter a mediados de 2010, con el nombre interno de Twitter Blueprint, para unificar el aspecto de las herramientas internas. Se publicó como código abierto el 19 de agosto de 2011 y pronto se convirtió en uno de los proyectos más populares de GitHub. Hoy lo mantiene un pequeño equipo de desarrolladores en la organización twbs de GitHub.
Su éxito se explica por una combinación que en 2011 no era habitual: estilos coherentes, componentes que funcionaban en todos los navegadores y una documentación con ejemplos listos para copiar. Miles de plantillas, temas de WordPress y paneles de administración se construyeron sobre él, y por eso sigue presente en una parte importante de la web.
02 ¿Para qué sirve Bootstrap?
Maquetar webs responsive
El grid y las utilidades adaptan el diseño al móvil, la tableta y el escritorio con clases como col-md-6.
Prototipar rápido
Con los componentes y ejemplos oficiales tienes una maqueta funcional en horas.
Paneles y aplicaciones internas
Formularios, tablas, pestañas y modales coherentes para herramientas de gestión.
Unificar el diseño de un equipo
Todos usan las mismas clases y el resultado es consistente aunque trabajen varias personas.
Bootstrap resuelve la base del diseño responsive, pero no sustituye al diseño: una web hecha solo con sus estilos por defecto se reconoce enseguida. Lo habitual es personalizar colores, tipografías y espaciados con sus variables Sass o CSS.
03 El grid de Bootstrap: 12 columnas y 6 puntos de ruptura
El sistema de rejilla divide cada fila en 12 columnas construidas con flexbox. Indicas cuántas ocupa cada bloque en cada tamaño de pantalla: col-12 col-md-6 col-lg-4 significa ancho completo en móvil, media fila en tableta y un tercio en escritorio.
| Punto de ruptura | Infijo de clase | Ancho de pantalla |
|---|---|---|
| Extra pequeño | ninguno (col-) | Menos de 576 px |
| Pequeño | sm | 576 px o más |
| Mediano | md | 768 px o más |
| Grande | lg | 992 px o más |
| Extra grande | xl | 1.200 px o más |
| Extra extra grande | xxl | 1.400 px o más |
04 Componentes y utilidades principales
Navegación
Navbar con menú hamburguesa en móvil, pestañas, migas de pan y paginación.
Formularios
Campos, selects, casillas, etiquetas flotantes y estados de validación.
Contenido
Tarjetas (cards), tablas, listas, alertas, insignias y botones.
Interacción
Modales, desplegables, acordeones, carruseles, tooltips, popovers y paneles laterales (offcanvas).
Utilidades
Clases para márgenes, rellenos, colores, flexbox, visibilidad y tipografía sin escribir CSS.
Modo oscuro
Desde la versión 5.3, modos de color claro y oscuro con el atributo data-bs-theme.
Los componentes interactivos usan el archivo bootstrap.bundle.min.js, que incluye Popper para posicionar desplegables, tooltips y popovers. Si no los necesitas, puedes cargar solo el CSS.
05 Cómo instalar y usar Bootstrap
-
1
Crea el HTML base
Un index.html con doctype HTML5 y la etiqueta meta viewport (width=device-width, initial-scale=1), imprescindible para que el diseño se adapte al móvil.
-
2
Añade el CSS
Enlaza bootstrap.min.css desde el CDN de jsDelivr en el head, o instálalo con npm install [email protected] si usas un empaquetador como Vite.
-
3
Añade el JavaScript
Carga bootstrap.bundle.min.js antes del cierre del body si vas a usar componentes interactivos.
-
4
Maqueta con clases
Usa container, row y col para la estructura y copia componentes de la documentación oficial.
-
5
Personaliza
Cambia colores, fuentes y bordes con las variables Sass o CSS en lugar de sobrescribir clases una a una.
-
6
Elimina lo que no uses
Con Sass puedes importar solo los módulos necesarios y reducir el peso del CSS final.
<div class="container"><div class="row"><div class="col-md-8">Contenido</div><div class="col-md-4">Barra lateral</div></div></div>
En móvil los dos bloques se apilan; a partir de 768 px se colocan uno junto a otro, ocupando 8 y 4 de las 12 columnas.
06 Versiones de Bootstrap
| Versión | Fecha | Cambio principal |
|---|---|---|
| 1.0 | 19 de agosto de 2011 | Publicación como código abierto |
| 2 | 31 de enero de 2012 | Diseño responsive como hoja de estilos opcional |
| 3 | 19 de agosto de 2013 | Reescritura mobile first y responsive por defecto |
| 4 | 18 de enero de 2018 | Paso a Sass y a flexbox |
| 5 | 5 de mayo de 2021 | Elimina jQuery, adopta variables CSS y abandona navegadores antiguos |
| 5.3.8 | 25 de agosto de 2025 | Última versión estable publicada en getbootstrap.com a septiembre de 2026 |
Si mantienes un proyecto en Bootstrap 3 o 4, recuerda que dependía de jQuery; migrar a la versión 5 permite quitar esa librería, pero obliga a revisar clases y atributos data-, que pasaron a llamarse data-bs-.
07 Bootstrap vs Tailwind CSS
| Criterio | Bootstrap | Tailwind CSS |
|---|---|---|
| Enfoque | Componentes prediseñados (btn, card, navbar) | Utilidades atómicas (utility-first) para diseñar en el HTML |
| Aspecto por defecto | Reconocible si no se personaliza | Sin estilo propio: el diseño lo decides tú |
| JavaScript | Incluye componentes interactivos | No incluye; se combina con otras librerías |
| Curva de aprendizaje | Baja para empezar | Requiere conocer bien CSS |
| Peso del CSS | Hay que recortar lo que no se usa | Genera solo las clases usadas |
| Versión actual | 5.3 | 4.0 desde el 22 de enero de 2025 |
Bootstrap sigue siendo una opción sólida para paneles de administración, prototipos y equipos que quieren resultados rápidos y consistentes. Para una web de marca con diseño propio, muchos equipos prefieren Tailwind o CSS a medida. Lo importante es que el CSS que llega al usuario sea el mínimo: el peso sobrante afecta a la velocidad de carga web y a las Core Web Vitals.
08 Ventajas y desventajas de Bootstrap
| Ventajas | Desventajas |
|---|---|
| Gratuito, de código abierto y con licencia MIT | Las webs sin personalizar se parecen entre sí |
| Documentación extensa y comunidad enorme | Si cargas todo el framework, sobra CSS y JavaScript |
| Responsive y accesible de serie en sus componentes | Personalizaciones profundas obligan a pelear con sus estilos |
| Acelera prototipos y proyectos con plazos cortos | HTML con muchas clases, más difícil de leer |
Elegir Bootstrap, Tailwind o CSS propio es una decisión técnica que depende del proyecto, del equipo y de cuánto diseño a medida necesitas. En nuestro desarrollo web a medida escogemos la pila según esos criterios, y en proyectos de diseño y desarrollo web cuidamos que el framework no se note en el resultado.
Preguntas frecuentes sobre Bootstrap
Es un framework front-end gratuito y de código abierto con estilos CSS, un grid de 12 columnas y componentes JavaScript para crear webs adaptables al móvil.
Sirve para maquetar webs y aplicaciones responsive con rapidez, prototipar interfaces y mantener un diseño coherente entre varios desarrolladores.
Sí. El código se distribuye con licencia MIT, que permite usarlo en proyectos personales y comerciales.
A septiembre de 2026, la versión estable publicada en getbootstrap.com es la 5.3.8, lanzada el 25 de agosto de 2025.
No desde la versión 5, que usa JavaScript nativo. Las versiones 3 y 4 sí dependían de jQuery.
Enlazando su CSS y su JavaScript desde el CDN de jsDelivr o instalándolo con npm install bootstrap e importándolo en tu proyecto.
Bootstrap es más rápido para empezar gracias a sus componentes; Tailwind da más libertad de diseño y genera solo el CSS que usas. Depende del proyecto y del equipo.
Sí. Según W3Techs, a septiembre de 2026 lo usa el 14,8 % de todas las webs, sobre todo en paneles, plantillas y proyectos que priorizan la rapidez.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗