Bibliografía: Bootstrap 5

1. Historia y Orígenes

Nombre Original: Blueprint de Twitter.
Creadores: Mark Otto y Jacob Thornton.
Definición: Framework de UI que combina HTML, CSS y JS para desarrollo rápido y responsivo.
Hito: Código abierto en 2011.

2. Versionado Semántico

Esquema Principal . Menor . Parche:

Principal: Cambios incompatibles (ej: de v4 a v5).
Menor: Nuevas funciones compatibles.
Parche: Corrección de errores.

3. Instalación y Dependencias

Popper.js: Requerido obligatoriamente para que funcionen los dropdowns y modales.
jsDelivr: La Red de Distribución de Contenido (CDN) recomendada.

Ubicación sugerida: CSS en <head> y JS al final del <body>.

4. Puntos de Interrupción (Breakpoints)

Nivel	Infijo	Dimensión
Extra Pequeño	xs	< 576px
Pequeño	sm	≥ 576px
Medio	md	≥ 768px
Grande	lg	≥ 992px
Extra Grande	xl	≥ 1200px
Extra-Extra	xxl	≥ 1400px

5. Sistema de Grillas (Grid)

Basado en Flexbox con un total de 12 columnas.

.col-4

.col-8

.col-6

              <div class="container">
                <div class="row">
                  <div class="col-md-6">Mitad en pantallas medianas</div>
                  <div class="col-md-6">Mitad en pantallas medianas</div>
                </div>
              </div>

6. Componentes Comunes

Imágenes: .img-fluid (responsiva).
Tablas: Requiere siempre .table.
Alertas: .alert + color (ej: .alert-danger).
Modales: Eliminan acceso al fondo. Solo uno a la vez.
Navbar: Empieza con la clase .navbar.

7. Formularios y Validación

Etiqueta: .form-label.
Input: .form-control.
Check/Radio: Contenedor .form-check.
Validación: Se activa con la clase .was-validated en el padre.

8. Utilidades de Diseño

Colores: primary, secondary, success, danger, warning, info, light, dark.

Espaciado: {propiedad}{lado}-{tamaño}

Propiedad: m (margin) o p (padding).
Lados: t, b, s (start), e (end), x (eje horizontal), y (eje vertical).
Ejemplo: .mt-3 (margen superior nivel 3).

Ocultar: .d-none (oculta), .d-md-block (muestra en medianas).