Introducción a Bootstrap 5

Bootstrap es un framework de CSS (y un poco de JavaScript): una colección de estilos ya hechos que puedes usar simplemente añadiendo clases a tu HTML. Lo crearon en 2011 unos ingenieros de Twitter y hoy es uno de los más usados del mundo.

Incluye una rejilla para maquetar, estilos para textos, botones, tablas y formularios, y componentes como menús de navegación, tarjetas, ventanas modales o carruseles de imágenes. Todo pensado para que se vea bien en cualquier pantalla (mobile first).

Bootstrap 5, la versión actual, ya no depende de jQuery: su JavaScript es JavaScript normal (vanilla).

Ventajas e inconvenientes

Ventajas

• Consigues páginas con buen aspecto muy rápido, sin ser diseñador.
• Todo es responsive desde el principio.
• Diseño consistente: todos los botones, formularios y tablas siguen el mismo estilo.
• Documentación excelente y enorme comunidad.
• Es software libre.

Inconvenientes

• Si no lo personalizas, tu web se parece a miles de webs más.
• Cargas mucho CSS que quizá no uses.
• Personalizarlo a fondo requiere aprender cómo está construido (variables de Sass).
• Llena el HTML de clases.

¿Merece la pena aprenderlo? Sí: lo pedirán en muchas ofertas de trabajo y es ideal para paneles de administración, prototipos y proyectos con poco tiempo. Pero aprende primero CSS de verdad (Flexbox, Grid, responsive): Bootstrap no sustituye a saber CSS, lo aprovecha. Hoy también es muy popular Tailwind CSS, que sigue una filosofía parecida de clases de utilidad.

Añadir Bootstrap a tu página

La forma más sencilla es cargarlo desde un CDN (un servidor que distribuye librerías). En el <head>:

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi web con Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>Hola, Bootstrap</h1>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

• El CSS es imprescindible.
• El JavaScript solo hace falta si usas componentes interactivos (menús desplegables, modales, carruseles…). Se pone al final del <body>.
• El viewport es obligatorio para que el diseño responsive funcione en móviles.

En la web oficial (getbootstrap.com) encontrarás estas líneas con un atributo integrity adicional: es una huella que garantiza que el archivo del CDN no ha sido modificado. Cópialas de allí con la versión más reciente.

En proyectos con herramientas modernas (como Astro o Vite), también se puede instalar con npm install bootstrap.

Contenedores

Todo el contenido debe ir dentro de un contenedor. Es el elemento que centra el contenido y le da márgenes laterales:

<div class="container">...</div>        <!-- ancho máximo que cambia según la pantalla -->
<div class="container-fluid">...</div>  <!-- siempre el 100 % del ancho -->

• .container: el contenido queda centrado con un ancho máximo que se ajusta a cada tamaño de pantalla. Es lo habitual.
• .container-fluid: ocupa todo el ancho, de lado a lado.

Normalmente usarás uno por sección de la página. No metas un contenedor dentro de otro.

Colores contextuales

Bootstrap no nombra los colores por cómo son (“azul”), sino por para qué sirven:

Nombre	Uso
primary	Acción principal, color de marca
secondary	Acciones secundarias
success	Éxito, confirmación
danger	Error, acción peligrosa
warning	Aviso
info	Información
light / dark	Fondos claros y oscuros

Se combinan con prefijos:

<p class="text-danger">Texto de error</p>
<div class="bg-success text-white p-3">Pedido confirmado</div>
<div class="border border-primary">Con borde azul</div>

Cuando cambies el color de fondo, piensa también en el del texto: blanco sobre bg-light no se lee.

Clases de utilidad

Bootstrap tiene cientos de clases pequeñas que hacen una sola cosa. Las más usadas:

Clase	Qué hace
m-3, mt-2, mx-auto	Margen (todos, arriba, horizontal automático)
p-4, py-2, px-3	Relleno
text-center, text-end	Alineación del texto
fw-bold, fs-4, lead	Grosor, tamaño y texto destacado
d-none, d-flex, d-md-block	display, también según el tamaño de pantalla
rounded, shadow, border	Esquinas, sombra, borde
w-100, h-100	Ancho y alto al 100 %

Los números de márgenes y rellenos van de 0 a 5 (de nada a 3rem). Las letras indican el lado: t arriba (top), b abajo, s inicio (start, izquierda), e final (end, derecha), x horizontal, y vertical.

Consejos para depurar

• Comprueba que todo está dentro de un .container.
• Revisa que cada <div> se cierra donde debe: un </div> de más o de menos descoloca toda la rejilla, y el validador no siempre lo detecta.
• No escribas CSS que pise las clases de Bootstrap salvo que sepas lo que haces. Si necesitas estilos propios, crea tus clases y carga tu CSS después del de Bootstrap.