Módulo 15: Bootstrap: fundamentos

Objetivos del módulo

Entender qué es Bootstrap, qué problemas resuelve y cuáles son sus inconvenientes
Instalar Bootstrap 5.3.8 mediante CDN y mediante npm
Saber orientarte en la documentación oficial
Conocer Reboot, los contenedores y los breakpoints
Dominar el sistema de rejilla: filas, columnas, offsets, orden, anidamiento y gutters
Usar las utilidades de espaciado, display, flex, color, bordes, sombras, tamaño, posición y texto
Mostrar y ocultar contenido según el tamaño de pantalla
Maquetar una página completa usando solo la rejilla y las utilidades

1. ¿Qué es Bootstrap?

📘 Concepto: Bootstrap es un framework de CSS (con un poco de JavaScript) que te ofrece una colección de estilos ya hechos: un sistema de rejilla para maquetar, cientos de clases de utilidad y componentes listos para usar (botones, menús, ventanas modales, formularios…). Tú escribes HTML y añades clases; Bootstrap pone el diseño.

Piensa en Bootstrap como en un mueble de IKEA: no fabricas las piezas desde cero, sino que montas piezas estándar siguiendo unas instrucciones. Es rápido y el resultado es sólido, aunque si no lo personalizas tu salón se parecerá al de mucha gente.

Hasta ahora has escrito todo el CSS a mano. Eso sigue siendo imprescindible: Bootstrap no sustituye a saber CSS, sino que lo aprovecha. Todo lo que viste de Flexbox, Grid, variables o media queries está dentro de Bootstrap, y entenderlo te permitirá personalizarlo y depurarlo.

1.1 Ventajas e inconvenientes

Ventajas	Inconvenientes
Desarrollo muy rápido de prototipos e interfaces	Webs con aspecto “genérico” si no se personaliza
Diseño responsive desde el primer momento	Carga CSS y JS que quizá no uses (se puede reducir)
Componentes probados en muchos navegadores	HTML con muchas clases (`class="d-flex justify-content-between ..."`)
Buena accesibilidad de base en sus componentes	Hay que aprender su vocabulario de clases
Documentación excelente y enorme comunidad	Sobrescribir estilos puede requerir cuidado con la especificidad
Equipos que comparten el mismo “idioma” de clases	Depender de un tercero para actualizaciones

💡 Consejo: Bootstrap es ideal para paneles de administración, prototipos, webs corporativas y proyectos donde la velocidad importa más que un diseño único. Para webs con un diseño muy personalizado, a menudo es mejor CSS propio.

1.2 Historia breve

Año	Versión	Hito
2011	1.0	Mark Otto y Jacob Thornton lo crean en Twitter para unificar herramientas internas
2012	2.x	Añade diseño responsive
2013	3.x	Enfoque mobile first y diseño plano
2018	4.x	Rejilla basada en Flexbox y migración a Sass
2021	5.0	Elimina la dependencia de jQuery y el soporte de Internet Explorer; propiedades lógicas (`ms-`, `me-`)
2023	5.3	Modos de color (modo oscuro) y más variables CSS
2025	5.3.8	Última versión estable de la rama 5, la que usaremos en el curso

⚠️ Importante: Al buscar ejemplos en Internet, fíjate en la versión. Mucho código antiguo usa Bootstrap 3 o 4 (col-xs-*, ml-*, data-toggle, jQuery) y no funciona igual en Bootstrap 5, que usa ms-*, data-bs-toggle, etc.

2. Instalación

2.1 Opción A: CDN (la más rápida)

Un CDN (Content Delivery Network) es una red de servidores que te sirve los ficheros de Bootstrap desde una ubicación cercana. Solo tienes que enlazarlos.

💻 Ejemplo: Plantilla inicial completa de Bootstrap 5.3.8. Guárdala como index.html y ábrela con Live Server.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <!-- Imprescindible para que el diseño responsive funcione en móviles -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mi primera página con Bootstrap</title>

    <!-- CSS de Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
          crossorigin="anonymous">

    <!-- Tu CSS propio SIEMPRE después de Bootstrap -->
    <link rel="stylesheet" href="css/estilos.css">
  </head>
  <body>
    <div class="container py-5">
      <h1 class="display-4">¡Hola, Bootstrap!</h1>
      <p class="lead">Si ves este texto con una tipografía cuidada y márgenes, Bootstrap está funcionando.</p>
      <button type="button" class="btn btn-primary">Un botón de Bootstrap</button>
    </div>

    <!-- JS de Bootstrap (incluye Popper), al final del body -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
            crossorigin="anonymous"></script>
  </body>
</html>

Elemento	Para qué sirve
`<!doctype html>`	Bootstrap necesita el modo estándar de HTML5
`<meta name="viewport">`	Sin él, los móviles muestran la versión de escritorio reducida
`bootstrap.min.css`	Todos los estilos (rejilla, utilidades, componentes)
`bootstrap.bundle.min.js`	El JavaScript de los componentes interactivos más Popper (necesario para dropdowns, tooltips y popovers)
`integrity`	Huella (SRI) que garantiza que el fichero no ha sido manipulado
`crossorigin="anonymous"`	Necesario para que la comprobación `integrity` funcione con un CDN

⚠️ Importante: Si copias el atributo integrity, debe corresponder exactamente a esa versión del fichero. Si cambias la versión en la URL, copia también el nuevo integrity desde la web oficial (getbootstrap.com); si no coinciden, el navegador bloqueará el fichero.

💡 Consejo: Si solo usas estilos (sin componentes interactivos como menús desplegables o modales), puedes omitir el <script>. Tu página cargará más rápido.

2.2 Opción B: npm (proyectos profesionales)

En proyectos con herramientas de construcción (Vite, Sass, etc.) se instala Bootstrap como dependencia con npm, el gestor de paquetes de Node.js.

# 1. Comprueba que tienes Node.js y npm instalados
node --version
npm --version

# 2. Crea la carpeta del proyecto e inicializa package.json
mkdir mi-proyecto
cd mi-proyecto
npm init -y

# 3. Instala Bootstrap (Popper se instala como dependencia necesaria)
npm install bootstrap@5.3.8

Tras la instalación tendrás una carpeta node_modules/bootstrap/ con esta estructura:

node_modules/bootstrap/
├── dist/
│   ├── css/
│   │   ├── bootstrap.css          ← versión legible
│   │   └── bootstrap.min.css      ← versión minificada (producción)
│   └── js/
│       ├── bootstrap.bundle.js    ← JS + Popper
│       └── bootstrap.bundle.min.js
├── js/                            ← código fuente JS por componentes
└── scss/                          ← código fuente Sass (para personalizar)

La forma más simple de usarlo es enlazar los ficheros de dist:

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- ... -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

📘 Concepto: La ventaja real de npm es poder compilar Bootstrap desde Sass con tus propios colores y quitar las partes que no uses. Lo harás en el módulo 17.

Método	Ventajas	Cuándo usarlo
CDN	Inmediato, sin instalación, caché compartida	Aprendizaje, prototipos, webs sencillas
npm	Control de versiones, personalización con Sass, trabajo sin conexión	Proyectos profesionales y equipos

3. La documentación oficial

La documentación de getbootstrap.com es tu mejor aliada. Está organizada así:

Sección	Qué encuentras
Getting started	Instalación, plantilla inicial, navegadores soportados, accesibilidad
Customize	Sass, opciones, modos de color, variables CSS
Layout	Breakpoints, contenedores, rejilla, columnas, gutters
Content	Reboot, tipografía, imágenes, tablas, figuras
Forms	Controles, selects, checks, rangos, grupos, validación
Components	Alertas, botones, cards, navbar, modal, carrusel…
Helpers	Clases de ayuda: `clearfix`, `ratio`, `stretched-link`, `visually-hidden`…
Utilities	Clases de una propiedad: spacing, display, flex, colores…

💡 Consejo: Cada página de la documentación tiene ejemplos con un botón para copiar el código. Aprende a buscar: la tecla Ctrl + K (o /) abre el buscador de la documentación.

4. Reboot: la base de Bootstrap

📘 Concepto: Reboot es la hoja de estilos base de Bootstrap. Normaliza las diferencias entre navegadores y establece valores por defecto sensatos. Es como “allanar el terreno” antes de construir.

Entre otras cosas, Reboot:

Aplica box-sizing: border-box a todos los elementos.
Usa una pila de fuentes del sistema (system-ui, -apple-system, Segoe UI, Roboto…).
Define font-size base de 1rem (normalmente 16px) y line-height: 1.5 en el body.
Elimina el margin-top de títulos y párrafos, y deja un margin-bottom coherente.
Mejora los estilos de enlaces, tablas, formularios y <abbr>.

<!-- Sin una sola clase, el texto ya se ve más cuidado gracias a Reboot -->
<h1>Título principal</h1>
<p>Párrafo con <a href="#">un enlace</a> y <abbr title="HyperText Markup Language">HTML</abbr>.</p>

5. Breakpoints

Los breakpoints (puntos de ruptura) son los anchos de pantalla en los que el diseño cambia. Bootstrap es mobile first: los estilos sin prefijo se aplican a todas las pantallas, y los prefijos indican “a partir de este ancho”.

Breakpoint	Infijo de clase	Ancho mínimo	Dispositivo típico
Extra pequeño	(ninguno)	< 576px	Móviles en vertical
Pequeño	`sm`	≥ 576px	Móviles en horizontal
Mediano	`md`	≥ 768px	Tablets
Grande	`lg`	≥ 992px	Portátiles
Extra grande	`xl`	≥ 1200px	Escritorio
Extra extra grande	`xxl`	≥ 1400px	Pantallas grandes

⚠️ Importante: col-md-6 significa “media anchura desde 768px en adelante”. Por debajo de 768px, si no indicas nada más, la columna ocupará todo el ancho. Así funciona el mobile first.

Internamente, un infijo como md equivale a una media query como la que ya conoces:

@media (min-width: 768px) {
  .col-md-6 { flex: 0 0 auto; width: 50%; }
}

6. Contenedores

Los contenedores son el elemento más básico de maquetación: centran el contenido y le dan márgenes laterales.

Clase	< 576	≥ 576	≥ 768	≥ 992	≥ 1200	≥ 1400
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

<!-- Ancho fijo por saltos, centrado -->
<div class="container">Contenido centrado</div>

<!-- Siempre a todo el ancho -->
<div class="container-fluid">Ocupo toda la pantalla</div>

<!-- 100% hasta lg; desde 992px se comporta como .container -->
<div class="container-lg">Fluido en móvil y tablet</div>

💡 Consejo: Un patrón muy habitual: secciones de fondo a todo el ancho y contenido centrado dentro.

<section class="bg-light"><div class="container">...</div></section>

7. El sistema de rejilla

7.1 Conceptos básicos

📘 Concepto: La rejilla de Bootstrap se basa en Flexbox y divide cada fila en 12 columnas imaginarias. Cada columna indica cuántas de esas 12 partes ocupa. ¿Por qué 12? Porque 12 se divide entre 1, 2, 3, 4 y 6, lo que permite muchas combinaciones.

La estructura siempre es: contenedor → fila → columnas.

<div class="container">
  <div class="row">
    <div class="col">Columna 1</div>
    <div class="col">Columna 2</div>
    <div class="col">Columna 3</div>
  </div>
</div>

flowchart TD
    A[".container"] --> B[".row"]
    B --> C[".col-*"]
    B --> D[".col-*"]
    B --> E[".col-*"]
    C --> F["Tu contenido"]

⚠️ Importante: Las columnas deben ser hijas directas de una .row, y el contenido va dentro de las columnas. No pongas texto directamente en una .row.

Para ver bien las columnas mientras practicas, añade este CSS temporal:

/* Solo para visualizar la rejilla mientras aprendes */
.row > * {
  background: rgba(13, 110, 253, 0.15);
  border: 1px solid rgba(13, 110, 253, 0.4);
  padding-block: 0.75rem;
}

7.2 Tipos de columnas

Clase	Comportamiento
`.col`	Columnas de igual anchura que se reparten el espacio
`.col-4`	Ocupa 4 de 12 (un tercio) en todas las pantallas
`.col-md-4`	Ocupa 4 de 12 desde md; por debajo, 100%
`.col-auto`	Anchura según su contenido
`.col-md-auto`	Anchura según contenido desde md

<div class="container">
  <!-- Igual anchura -->
  <div class="row">
    <div class="col">1 de 2</div>
    <div class="col">2 de 2</div>
  </div>

  <!-- Anchuras explícitas: suman 12 -->
  <div class="row">
    <div class="col-8">8/12</div>
    <div class="col-4">4/12</div>
  </div>

  <!-- Una columna con ancho fijo y el resto se reparte -->
  <div class="row">
    <div class="col">Flexible</div>
    <div class="col-6">Mitad</div>
    <div class="col">Flexible</div>
  </div>

  <!-- Columna que se ajusta al contenido -->
  <div class="row">
    <div class="col-auto">Ajustada al texto</div>
    <div class="col">Ocupo el resto</div>
  </div>
</div>

💡 Consejo: Si las columnas de una fila suman más de 12, las que no caben pasan a la línea siguiente. Es un comportamiento útil, no un error.

7.3 Columnas responsive: combinar breakpoints

Puedes combinar varias clases en el mismo elemento para que la columna cambie según la pantalla:

<div class="container">
  <div class="row">
    <!-- Móvil: 1 por fila | Tablet: 2 por fila | Portátil: 4 por fila -->
    <div class="col-12 col-md-6 col-lg-3">Producto 1</div>
    <div class="col-12 col-md-6 col-lg-3">Producto 2</div>
    <div class="col-12 col-md-6 col-lg-3">Producto 3</div>
    <div class="col-12 col-md-6 col-lg-3">Producto 4</div>
  </div>
</div>

Pantalla	Clase activa	Columnas por fila
< 768px	`col-12`	1
768px a 991px	`col-md-6`	2
≥ 992px	`col-lg-3`	4

✏️ Ejercicio: Crea una fila con un <main> y un <aside>. En móvil deben ocupar el 100% cada uno; desde lg, el main debe ocupar 8 columnas y el aside 4. Redimensiona el navegador para comprobarlo.

7.4 Desplazamiento (offset)

offset-* deja columnas vacías a la izquierda:

<div class="row">
  <!-- Columna de 6 centrada: 3 vacías + 6 + 3 libres -->
  <div class="col-md-6 offset-md-3">Centrada en tablet y superiores</div>
</div>

<div class="row">
  <div class="col-md-4">Izquierda</div>
  <div class="col-md-4 offset-md-4">Derecha (con 4 columnas de hueco)</div>
</div>

💡 Consejo: Alternativa moderna: usar márgenes automáticos. ms-auto en una columna la empuja a la derecha.

7.5 Orden

Las clases order-* cambian el orden visual (no el del HTML):

<div class="row">
  <!-- En móvil la imagen va arriba; desde md, el texto pasa a la izquierda -->
  <div class="col-md-6 order-md-2">
    <img src="foto.jpg" class="img-fluid" alt="Descripción de la foto">
  </div>
  <div class="col-md-6 order-md-1">
    <h2>Texto explicativo</h2>
    <p>Contenido...</p>
  </div>
</div>

Valores disponibles: order-0 a order-5, order-first y order-last, con o sin breakpoint (order-lg-first).

⚠️ Importante: Los lectores de pantalla y la navegación con teclado siguen el orden del HTML, no el visual. Usa order-* con moderación y mantén un orden de código lógico.

7.6 Anidamiento

Dentro de una columna puedes crear una nueva .row con sus propias 12 columnas:

<div class="row">
  <div class="col-md-8">
    Columna principal
    <div class="row">
      <div class="col-6">Sub-columna A (mitad de la principal)</div>
      <div class="col-6">Sub-columna B</div>
    </div>
  </div>
  <div class="col-md-4">Lateral</div>
</div>

7.7 Gutters (espacio entre columnas)

El gutter es el espacio entre columnas. Por defecto es de 1.5rem horizontal. Se controla en la .row:

Clase	Efecto
`g-0` … `g-5`	Espacio horizontal y vertical
`gx-0` … `gx-5`	Solo horizontal
`gy-0` … `gy-5`	Solo vertical (útil cuando las columnas saltan de línea)
`g-md-4`	Con breakpoint

<!-- Galería con espacio de 1.5rem en ambos ejes -->
<div class="row g-4">
  <div class="col-6 col-md-3"><img src="1.jpg" class="img-fluid rounded" alt="Foto 1"></div>
  <div class="col-6 col-md-3"><img src="2.jpg" class="img-fluid rounded" alt="Foto 2"></div>
  <div class="col-6 col-md-3"><img src="3.jpg" class="img-fluid rounded" alt="Foto 3"></div>
  <div class="col-6 col-md-3"><img src="4.jpg" class="img-fluid rounded" alt="Foto 4"></div>
</div>

<!-- Sin espacio entre columnas -->
<div class="row g-0">
  <div class="col-6">Pegada</div>
  <div class="col-6">Pegada</div>
</div>

7.8 `row-cols`: número de columnas desde la fila

En lugar de poner la clase en cada columna, puedes decir en la fila cuántas columnas por línea quieres:

<!-- 1 por fila en móvil, 2 en sm, 3 en lg -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
  <div class="col"><div class="p-3 border">Tarjeta 1</div></div>
  <div class="col"><div class="p-3 border">Tarjeta 2</div></div>
  <div class="col"><div class="p-3 border">Tarjeta 3</div></div>
  <div class="col"><div class="p-3 border">Tarjeta 4</div></div>
  <div class="col"><div class="p-3 border">Tarjeta 5</div></div>
  <div class="col"><div class="p-3 border">Tarjeta 6</div></div>
</div>

💡 Consejo: row-cols-* es perfecto para listados de tarjetas, productos o fotos: añadir un elemento nuevo no requiere tocar ninguna clase.

7.9 Alineación en la rejilla

Como la rejilla es Flexbox, puedes usar las utilidades flex sobre la .row:

<!-- Columnas centradas horizontalmente -->
<div class="row justify-content-center">
  <div class="col-4">Centrada</div>
</div>

<!-- Columnas alineadas verticalmente al centro (la fila necesita altura) -->
<div class="row align-items-center" style="min-height: 200px">
  <div class="col">Centrado vertical</div>
  <div class="col">Centrado vertical</div>
</div>

8. Utilidades

📘 Concepto: Las utilidades son clases que aplican una sola propiedad CSS (o muy pocas). Por ejemplo, mt-3 solo pone margin-top: 1rem. Combinándolas puedes maquetar casi cualquier cosa sin escribir CSS.

8.1 Espaciado: margin y padding

El nombre sigue el patrón {propiedad}{lado}-{breakpoint}-{tamaño}:

Parte	Valores
Propiedad	`m` (margin), `p` (padding)
Lado	`t` (top), `b` (bottom), `s` (start), `e` (end), `x` (horizontal), `y` (vertical), vacío (los 4)
Breakpoint	opcional: `sm`, `md`, `lg`, `xl`, `xxl`
Tamaño	`0`, `1`, `2`, `3`, `4`, `5`, `auto`

Tamaño	Valor
`0`	0
`1`	0.25rem (4px)
`2`	0.5rem (8px)
`3`	1rem (16px)
`4`	1.5rem (24px)
`5`	3rem (48px)
`auto`	auto (solo margin)

<div class="mt-3">margin-top: 1rem</div>
<div class="px-4">padding izquierdo y derecho: 1.5rem</div>
<div class="p-2 p-md-5">padding 0.5rem en móvil, 3rem desde md</div>
<div class="mx-auto" style="width: 300px">Centrado horizontalmente</div>
<div class="mb-0">Sin margen inferior</div>

💡 Consejo: Las clases s (start) y e (end) son propiedades lógicas (las viste en el módulo 14): en una página en árabe (dir="rtl"), ms-3 se aplica a la derecha automáticamente.

8.2 Display

<span class="d-block">Ahora soy un bloque</span>
<div class="d-inline">Ahora soy inline</div>
<div class="d-flex">Contenedor flex</div>
<div class="d-grid gap-2">Contenedor grid (ideal para botones a todo el ancho)</div>
<div class="d-none">Oculto</div>

Valores: none, inline, inline-block, block, grid, inline-grid, table, table-cell, table-row, flex, inline-flex. Todos admiten breakpoint: d-md-flex.

8.3 Utilidades flex

Clase	Propiedad CSS
`flex-row`, `flex-column`	`flex-direction`
`justify-content-start/center/end/between/around/evenly`	`justify-content`
`align-items-start/center/end/baseline/stretch`	`align-items`
`align-self-*`	`align-self` en un ítem
`flex-wrap`, `flex-nowrap`	`flex-wrap`
`flex-grow-1`, `flex-shrink-0`	crecimiento y encogimiento
`flex-fill`	Ítems que ocupan el espacio disponible por igual
`gap-0` … `gap-5`	`gap`
`order-*`	`order`

<!-- Barra con logo a la izquierda y botones a la derecha, centrados verticalmente -->
<div class="d-flex justify-content-between align-items-center p-3 border">
  <strong>MiLogo</strong>
  <div class="d-flex gap-2">
    <a href="#" class="btn btn-outline-primary">Entrar</a>
    <a href="#" class="btn btn-primary">Registrarse</a>
  </div>
</div>

<!-- Columna en móvil, fila desde md -->
<div class="d-flex flex-column flex-md-row gap-3 mt-3">
  <div class="p-3 border flex-fill">A</div>
  <div class="p-3 border flex-fill">B</div>
  <div class="p-3 border flex-fill">C</div>
</div>

8.4 Colores de texto y fondo

Bootstrap define colores semánticos (con significado):

Color	Uso típico
`primary`	Acción principal, color de marca
`secondary`	Acciones secundarias
`success`	Éxito, confirmación
`danger`	Error, acción destructiva
`warning`	Advertencia
`info`	Información
`light` / `dark`	Fondos claros u oscuros

<p class="text-primary">Texto en color primario</p>
<p class="text-danger">Texto de error</p>
<p class="text-body-secondary">Texto secundario (atenuado)</p>

<div class="bg-success text-white p-2">Fondo verde con texto blanco</div>
<div class="bg-warning-subtle text-warning-emphasis p-2">Fondo suave con texto enfatizado</div>

<!-- text-bg-*: fondo + color de texto con contraste automático -->
<span class="text-bg-info p-2">Info con contraste correcto</span>

<!-- Opacidad del fondo -->
<div class="bg-primary bg-opacity-25 p-2">Primario al 25%</div>

⚠️ Importante: El color no debe ser la única forma de transmitir información (por ejemplo, “los campos en rojo son obligatorios”). Acompáñalo de texto o iconos para personas con daltonismo o que usan lector de pantalla.

💡 Consejo: En Bootstrap 5.3, text-muted sigue funcionando pero está desaconsejado; usa text-body-secondary, que se adapta al modo oscuro.

8.5 Bordes y esquinas

<div class="border p-2">Borde en los 4 lados</div>
<div class="border-top border-3 border-primary p-2">Borde superior grueso azul</div>
<div class="border border-danger-subtle p-2">Borde rojo suave</div>
<div class="border-0">Sin borde</div>

<img src="avatar.jpg" class="rounded-circle" width="80" height="80" alt="Avatar">
<div class="rounded-3 bg-light p-3">Esquinas redondeadas grandes</div>
<div class="rounded-pill bg-dark text-white px-3">Forma de píldora</div>

Clase	Efecto
`border`, `border-top/end/bottom/start`	Añadir bordes
`border-0`, `border-top-0` …	Quitar bordes
`border-1` … `border-5`	Grosor
`border-{color}`	Color
`rounded`, `rounded-0` … `rounded-5`	Radio de esquinas
`rounded-circle`, `rounded-pill`	Círculo y píldora

8.6 Sombras

<div class="shadow-none p-3 mb-3">Sin sombra</div>
<div class="shadow-sm p-3 mb-3">Sombra pequeña</div>
<div class="shadow p-3 mb-3">Sombra normal</div>
<div class="shadow-lg p-3 mb-3">Sombra grande</div>

8.7 Tamaño

Clase	Efecto
`w-25`, `w-50`, `w-75`, `w-100`, `w-auto`	`width` en porcentaje del padre
`h-25` … `h-100`, `h-auto`	`height` en porcentaje del padre
`mw-100`, `mh-100`	`max-width` / `max-height: 100%`
`vw-100`, `vh-100`	100% del viewport
`min-vw-100`, `min-vh-100`	Mínimo del 100% del viewport

<!-- Sección de portada que ocupa como mínimo toda la pantalla -->
<header class="min-vh-100 d-flex align-items-center justify-content-center bg-dark text-white">
  <h1>Bienvenido</h1>
</header>

<input type="text" class="form-control w-50" placeholder="Ocupo la mitad">

8.8 Posición

<div class="position-relative border p-5">
  Contenedor relativo
  <span class="position-absolute top-0 end-0 badge text-bg-danger m-2">Nuevo</span>
  <span class="position-absolute top-50 start-50 translate-middle">Centrado exacto</span>
</div>

<nav class="sticky-top bg-white border-bottom p-2">Me quedo pegado arriba al hacer scroll</nav>

Clase	Efecto
`position-static/relative/absolute/fixed/sticky`	`position`
`top-0`, `top-50`, `top-100` (también `bottom`, `start`, `end`)	Coordenadas
`translate-middle`	Centra un elemento sobre su punto de anclaje
`fixed-top`, `fixed-bottom`	Fijo arriba o abajo
`sticky-top`, `sticky-md-top`	Pegajoso (con breakpoint opcional)

8.9 Texto y tipografía

<h1 class="display-1">Título gigante</h1>
<p class="lead">Párrafo de entradilla, un poco más grande</p>
<p class="fs-4">Tamaño de fuente 4 (fs-1 es el más grande, fs-6 el más pequeño)</p>

<p class="text-center text-md-start">Centrado en móvil, a la izquierda desde md</p>
<p class="text-end">Alineado al final</p>

<p class="fw-bold">Negrita</p>
<p class="fw-light fst-italic">Fina y cursiva</p>
<p class="text-uppercase">mayúsculas</p>
<p class="text-decoration-underline">Subrayado</p>
<a href="#" class="text-decoration-none">Enlace sin subrayado</a>

<p class="text-truncate" style="max-width: 200px">Texto muy largo que se corta con puntos suspensivos</p>
<p class="text-nowrap">No hago salto de línea</p>
<p class="lh-sm">Interlineado pequeño</p>
<p class="font-monospace">Fuente monoespaciada</p>

Grupo	Clases
Tamaño	`fs-1` … `fs-6`, `display-1` … `display-6`, `lead`, `small`
Peso	`fw-bold`, `fw-semibold`, `fw-normal`, `fw-light`
Estilo	`fst-italic`, `fst-normal`
Alineación	`text-start`, `text-center`, `text-end` (con breakpoint)
Transformación	`text-lowercase`, `text-uppercase`, `text-capitalize`
Decoración	`text-decoration-none`, `-underline`, `-line-through`
Interlineado	`lh-1`, `lh-sm`, `lh-base`, `lh-lg`
Otros	`text-truncate`, `text-wrap`, `text-nowrap`, `text-break`, `font-monospace`

8.10 Otras utilidades útiles

Clase	Para qué
`img-fluid`	Imagen responsive (`max-width: 100%; height: auto`)
`ratio ratio-16x9`	Contenedor con proporción fija (vídeos, iframes)
`overflow-hidden`, `overflow-auto`	Desbordamiento
`opacity-50`	Opacidad
`z-1`, `z-2`, `z-3`	`z-index`
`visually-hidden`	Oculto visualmente pero accesible para lectores de pantalla
`stretched-link`	Hace clicable todo el contenedor posicionado del enlace

<!-- Vídeo de YouTube responsive -->
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/ID_DEL_VIDEO" title="Vídeo de presentación" allowfullscreen></iframe>
</div>

9. Visibilidad responsive

Combinando d-none con d-{breakpoint}-{valor} puedes mostrar u ocultar elementos según la pantalla:

Objetivo	Clases
Oculto en todas las pantallas	`d-none`
Oculto solo en móvil (< 768px)	`d-none d-md-block`
Visible solo en móvil	`d-md-none`
Visible solo en md (tablet)	`d-none d-md-block d-lg-none`
Visible solo desde lg	`d-none d-lg-block`
Oculto solo en lg	`d-lg-none d-xl-block`

<p class="d-md-none">📱 Estás en un móvil</p>
<p class="d-none d-md-block d-lg-none">📟 Estás en una tablet</p>
<p class="d-none d-lg-block">🖥️ Estás en un ordenador</p>

<!-- Ocultar al imprimir -->
<nav class="d-print-none">Este menú no sale en papel</nav>

⚠️ Importante: d-none usa display: none, que oculta el elemento también para los lectores de pantalla. Si quieres ocultar algo solo visualmente (por ejemplo, el texto de un botón con icono), usa visually-hidden.

<button class="btn btn-primary">
  🔍 <span class="visually-hidden">Buscar</span>
</button>

10. Maquetación completa solo con rejilla y utilidades

💻 Ejemplo: Página de inicio completa (cabecera, portada, características, contenido con lateral y pie) sin escribir ni una línea de CSS propio.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Estudio Nube — Diseño web</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column min-vh-100">

  <!-- Cabecera -->
  <header class="border-bottom bg-white sticky-top">
    <div class="container d-flex flex-wrap justify-content-between align-items-center py-3">
      <a href="#" class="fs-4 fw-bold text-decoration-none text-dark">☁️ Estudio Nube</a>
      <nav class="d-flex gap-3">
        <a href="#servicios" class="text-decoration-none">Servicios</a>
        <a href="#blog" class="text-decoration-none">Blog</a>
        <a href="#contacto" class="text-decoration-none">Contacto</a>
      </nav>
    </div>
  </header>

  <main class="flex-grow-1">
    <!-- Portada -->
    <section class="bg-primary text-white py-5">
      <div class="container py-md-5">
        <div class="row align-items-center g-4">
          <div class="col-lg-7 text-center text-lg-start">
            <h1 class="display-4 fw-bold">Webs rápidas y bonitas</h1>
            <p class="lead mb-4">Diseñamos sitios responsive para pequeñas empresas.</p>
            <div class="d-grid gap-2 d-sm-flex justify-content-sm-center justify-content-lg-start">
              <a href="#contacto" class="btn btn-light btn-lg px-4">Pide presupuesto</a>
              <a href="#servicios" class="btn btn-outline-light btn-lg px-4">Ver servicios</a>
            </div>
          </div>
          <div class="col-lg-5 d-none d-lg-block">
            <div class="bg-white bg-opacity-25 rounded-4 ratio ratio-4x3"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- Características -->
    <section id="servicios" class="py-5">
      <div class="container">
        <h2 class="text-center mb-5">Nuestros servicios</h2>
        <div class="row row-cols-1 row-cols-md-3 g-4 text-center">
          <div class="col">
            <div class="h-100 p-4 border rounded-3 shadow-sm">
              <div class="fs-1 mb-2">🎨</div>
              <h3 class="fs-5 fw-semibold">Diseño</h3>
              <p class="text-body-secondary mb-0">Interfaces claras y accesibles.</p>
            </div>
          </div>
          <div class="col">
            <div class="h-100 p-4 border rounded-3 shadow-sm">
              <div class="fs-1 mb-2">⚡</div>
              <h3 class="fs-5 fw-semibold">Rendimiento</h3>
              <p class="text-body-secondary mb-0">Páginas que cargan en un instante.</p>
            </div>
          </div>
          <div class="col">
            <div class="h-100 p-4 border rounded-3 shadow-sm">
              <div class="fs-1 mb-2">📱</div>
              <h3 class="fs-5 fw-semibold">Responsive</h3>
              <p class="text-body-secondary mb-0">Perfectas en móvil, tablet y escritorio.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Contenido + lateral -->
    <section id="blog" class="py-5 bg-body-tertiary">
      <div class="container">
        <div class="row g-5">
          <article class="col-lg-8">
            <h2 class="mb-3">Por qué tu negocio necesita una web</h2>
            <p class="text-body-secondary small">Publicado el 3 de octubre de 2026</p>
            <p>Hoy en día, la mayoría de clientes busca en Internet antes de comprar...</p>
            <p>Una web propia te da control sobre tu imagen y tus contenidos...</p>
          </article>
          <aside class="col-lg-4">
            <div class="p-4 bg-white border rounded-3 position-sticky" style="top: 6rem">
              <h3 class="fs-5">Sobre nosotros</h3>
              <p class="mb-0">Somos un pequeño estudio de diseño web con sede en Valencia.</p>
            </div>
          </aside>
        </div>
      </div>
    </section>
  </main>

  <!-- Pie -->
  <footer id="contacto" class="bg-dark text-white text-opacity-75 py-4 mt-auto">
    <div class="container d-flex flex-column flex-md-row justify-content-between gap-2 text-center text-md-start">
      <p class="mb-0">© 2026 Estudio Nube</p>
      <p class="mb-0">hola@estudionube.example</p>
    </div>
  </footer>

</body>
</html>

Fíjate en algunas técnicas:

Técnica	Clases	Efecto
Pie siempre abajo	`body.d-flex.flex-column.min-vh-100` + `main.flex-grow-1`	El pie no “sube” si hay poco contenido
Botones apilados en móvil	`d-grid gap-2 d-sm-flex`	En móvil, botones a todo el ancho; desde sm, en fila
Tarjetas de igual altura	`h-100` en la caja interior	Todas las cajas de la fila igualan su altura
Ocultar decoración en móvil	`d-none d-lg-block`	La ilustración solo aparece en pantallas grandes
Texto centrado solo en móvil	`text-center text-lg-start`	Alineación responsive

11. Errores comunes

Error	Consecuencia	Solución
Olvidar `<meta name="viewport">`	En móvil se ve la versión de escritorio diminuta	Añádelo siempre en el `<head>`
Columnas fuera de una `.row`	Los gutters y el reparto no funcionan	`container > row > col`
Contenido directamente en `.row`	Márgenes negativos visibles, desalineación	Mete el contenido dentro de una `.col`
Usar `col-xs-6` (Bootstrap 3)	No existe en Bootstrap 5	Usa `col-6`
Usar `ml-3`/`mr-3` (Bootstrap 4)	No existe en Bootstrap 5	Usa `ms-3`/`me-3`
Cargar `bootstrap.min.js` sin Popper	Dropdowns y tooltips fallan	Usa `bootstrap.bundle.min.js`
Tu CSS antes que Bootstrap	Bootstrap sobrescribe tus estilos	Enlaza tu CSS después

12. Ejercicios

Ejercicio 1: Plantilla inicial

Crea un proyecto con la plantilla inicial de Bootstrap 5.3.8 por CDN, una carpeta css/ con estilos.css enlazado después de Bootstrap, y un título con display-3. Comprueba en la pestaña Network de DevTools que se cargan los dos ficheros de Bootstrap.

Ejercicio 2: Exploración de contenedores

Crea seis bloques uno debajo de otro, cada uno con un contenedor distinto (container, container-sm, container-md, container-lg, container-xl, container-fluid) y fondo de color. Redimensiona la ventana (o usa el modo dispositivo de DevTools) y anota a qué ancho cambia cada uno.

Ejercicio 3: Rejilla responsive de productos

Maqueta un listado de 8 productos que muestre 1 por fila en móvil, 2 en sm, 3 en md y 4 en xl. Hazlo dos veces: primero con clases en cada columna (col-12 col-sm-6 ...) y después con row-cols-*. ¿Cuál es más mantenible?

Ejercicio 4: Layout clásico de blog

Crea una página con cabecera, contenido principal (8 columnas) y lateral (4 columnas) desde lg. En móvil, el lateral debe aparecer antes que el contenido usando order-*. Reflexiona sobre si eso es correcto para la accesibilidad.

Ejercicio 5: Solo utilidades

Sin escribir CSS propio, crea una “tarjeta de perfil”: avatar redondo (rounded-circle), nombre en negrita, cargo en text-body-secondary, dos botones alineados con d-flex gap-2, sombra, bordes redondeados y padding. Céntrala en la pantalla vertical y horizontalmente con min-vh-100 d-flex align-items-center justify-content-center.

Ejercicio 6: Visibilidad responsive

Crea una cabecera que en móvil muestre solo el logo y un botón “Menú”, y desde lg muestre el logo y cuatro enlaces en línea (sin el botón). Usa únicamente clases d-*.

Ejercicio 7: Réplica de landing

Elige una landing page sencilla real y replica su estructura (portada, tres características, testimonios, llamada a la acción y pie) usando solo la rejilla y utilidades de Bootstrap. Valida que se ve bien a 375px, 768px y 1440px de ancho.

Resumen

Concepto	Sintaxis / clases	Para qué
CDN	`bootstrap.min.css` + `bootstrap.bundle.min.js`	Instalación rápida
npm	`npm install bootstrap@5.3.8`	Proyectos profesionales y Sass
Breakpoints	`sm` 576, `md` 768, `lg` 992, `xl` 1200, `xxl` 1400	Mobile first: “desde este ancho”
Contenedores	`container`, `container-fluid`, `container-md`	Centrar y limitar el contenido
Rejilla	`row` + `col`, `col-6`, `col-md-4`, `col-auto`	12 columnas con Flexbox
Offset y orden	`offset-md-3`, `order-md-2`, `order-first`	Desplazar y reordenar
Gutters	`g-`, `gx-`, `gy-*`	Espacio entre columnas
Row-cols	`row-cols-1 row-cols-md-3`	Columnas por fila desde la fila
Espaciado	`m{lado}-{bp}-{0-5}`, `p{lado}-{bp}-{0-5}`	Márgenes y rellenos
Display	`d-none`, `d-flex`, `d-md-block`	Tipo de caja y visibilidad
Flex	`justify-content-`, `align-items-`, `gap-*`	Alineación
Color	`text-`, `bg-`, `text-bg-`, `-subtle`	Colores semánticos
Bordes y sombras	`border`, `rounded-`, `shadow-`	Decoración
Tamaño	`w-`, `h-`, `min-vh-100`	Dimensiones
Posición	`position-*`, `top-0`, `sticky-top`	Posicionamiento
Texto	`fs-`, `fw-`, `text-center`, `display-*`, `lead`	Tipografía
Accesibilidad	`visually-hidden`	Ocultar solo visualmente

Navegación
← Módulo anterior: CSS moderno	Siguiente módulo: Bootstrap: componentes →