Un framework de CSS es una colección de estilos ya hechos: retícula, botones, formularios, menús, tarjetas… Permite montar una interfaz correcta y adaptable muy rápido. Bootstrap es el más conocido y el que más encontrarás en empresas y plantillas; y muchas plataformas educativas están construidas con él.

📌 Nota. Un framework no sustituye a saber CSS: cuando algo no encaja, tendrás que entender qué hace por debajo y sobrescribirlo. Por eso lo ves después de Flexbox, Grid y los componentes.

Para probar, basta con enlazar el CSS y el JavaScript de Bootstrap desde su CDN (copia las líneas exactas, con su versión, de getbootstrap.com):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi primera página con Bootstrap</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
</head>
<body>
  <main class="container py-5">
    <h1 class="display-4">Estudio Norte</h1>
    <p class="lead">Identidad visual y diseño web.</p>
    <a class="btn btn-primary btn-lg" href="#trabajos">Ver trabajos</a>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Todo se hace añadiendo clases en el HTML: container centra y limita el ancho, py-5 da relleno vertical, btn btn-primary convierte un enlace en botón.

Bootstrap divide el ancho en 12 columnas, con Flexbox por dentro:

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Proyecto 1</div>
    <div class="col-12 col-md-6 col-lg-4">Proyecto 2</div>
    <div class="col-12 col-md-6 col-lg-4">Proyecto 3</div>
  </div>
</div>

• row es la fila; col-* indica cuántas de las 12 columnas ocupa.
• Los prefijos son puntos de ruptura mobile first: sin prefijo (móvil), sm (≥ 576 px), md (≥ 768), lg (≥ 992), xl (≥ 1200).
• col-12 col-md-6 col-lg-4 = una columna en móvil, dos en tableta, tres en escritorio.
• g-4 es el hueco (gutter) entre columnas.

Bootstrap trae componentes listos: copia el HTML de su documentación y adáptalo.

<div class="card" style="max-width: 22rem;">
  <img src="img/cartel.webp" class="card-img-top" alt="Cartel del Festival de Otoño">
  <div class="card-body">
    <h3 class="card-title h5">Festival de Otoño</h3>
    <p class="card-text">Cartel y aplicaciones para redes.</p>
    <a href="proyecto.html" class="btn btn-outline-primary">Ver proyecto</a>
  </div>
</div>

Los más usados: navbar (menú que se pliega en móvil, con su botón hamburguesa accesible), card, btn, formularios (form-control, form-label), alert, modal, accordion y carousel. Los que se abren y cierran necesitan el JavaScript de Bootstrap (el bootstrap.bundle.min.js).

Además de componentes, hay cientos de clases de utilidad de una sola propiedad:

El gran riesgo de Bootstrap es que todas las webs se parecen. Como diseñador, tu trabajo es darle identidad. La forma más sencilla es sobrescribir sus variables CSS en tu propia hoja, enlazada después de la de Bootstrap:

/* css/estilos.css */
:root {
  --bs-primary: #d62828;
  --bs-primary-rgb: 214, 40, 40;
  --bs-body-font-family: "Inter", system-ui, sans-serif;
  --bs-border-radius: .75rem;
}
.btn-primary {
  --bs-btn-bg: #d62828;
  --bs-btn-border-color: #d62828;
  --bs-btn-hover-bg: #b01f1f;
  --bs-btn-hover-border-color: #b01f1f;
}

Para una personalización completa se usa Sass (lo dejamos para más adelante).

⚠️ Atención. Cargar Bootstrap desde un CDN hace que el navegador del visitante se conecte a un servidor externo. Para tus prácticas está bien; en un proyecto profesional es mejor descargarlo o instalarlo con npm (npm install bootstrap) y servirlo desde tu web.

Monta con Bootstrap una landing de un estudio de diseño ficticio:

1. navbar con logo y tres enlaces que se pliega en móvil.
2. Cabecera con título grande (display-4), texto (lead) y dos botones.
3. Sección de trabajos con seis card en retícula de 1 / 2 / 3 columnas.
4. Formulario de contacto con form-label y form-control.
5. Personaliza al menos el color principal, la tipografía y el radio de las esquinas.

• Poner columnas (col) fuera de una row, o una row fuera de un container.
• Sumar más de 12 columnas en una fila sin querer: las que sobran bajan de línea.
• Olvidar el bootstrap.bundle.min.js: el menú, los modales y el acordeón no se abren.
• Enlazar tu CSS antes que el de Bootstrap: el suyo gana.
• Copiar componentes sin revisar el alt, las etiquetas de los formularios o el contraste.