Tutorial Bootstrap: modales y ventanas emergentes esenciales

Estructura básica de modales

Los modales son ventanas superpuestas que aparecen por encima del contenido principal de la página para mostrar información adicional, solicitar confirmaciones del usuario o presentar formularios sin abandonar la página actual. En Bootstrap, estos componentes crean una capa modal que oscurece el fondo y centra el contenido del modal en la pantalla.

La estructura de un modal de Bootstrap se basa en tres elementos principales que trabajan en conjunto para crear la experiencia visual deseada:

<!-- Botón que activa el modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#miModal">
  Abrir Modal
</button>

<!-- Estructura del modal -->
<div class="modal fade" id="miModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- El contenido del modal irá aquí -->
    </div>
  </div>
</div>

Elementos fundamentales

1. El contenedor principal (.modal)

El elemento .modal actúa como el contenedor externo que cubre toda la pantalla y proporciona el fondo oscurecido. Este elemento incluye varios atributos importantes:

<div class="modal fade" id="ejemploModal" tabindex="-1">
  <!-- Contenido del modal -->
</div>

Clase .modal: Establece el comportamiento base del componente
Clase .fade: Añade una transición suave al mostrar y ocultar el modal
Atributo id: Identificador único que conecta el modal con su botón activador
Atributo tabindex="-1": Mejora la accesibilidad permitiendo que el modal reciba el foco del teclado

2. El diálogo modal (.modal-dialog)

El elemento .modal-dialog define el contenedor interno que determina el ancho y posicionamiento del modal en pantalla:

<div class="modal-dialog">
  <!-- Aquí va el contenido visible del modal -->
</div>

Este elemento se encarga de centrar el modal tanto horizontal como verticalmente y controla las dimensiones base del componente.

3. El contenido modal (.modal-content)

La clase .modal-content crea el contenedor visual del modal con el fondo blanco, bordes redondeados y sombra que le dan su apariencia característica:

<div class="modal-content">
  <!-- Header, body y footer del modal -->
</div>

Atributos de activación

Para que un modal funcione correctamente, necesitas conectar un elemento activador (normalmente un botón) con el modal correspondiente:

<!-- Botón activador -->
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalConfirmacion">
  Confirmar acción
</button>

<!-- Modal correspondiente -->
<div class="modal fade" id="modalConfirmacion" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Contenido del modal -->
    </div>
  </div>
</div>

Los atributos data que hacen posible esta conexión son:

data-bs-toggle="modal": Indica que el elemento debe activar un modal
data-bs-target="#idModal": Especifica qué modal debe abrirse usando su ID

Ejemplo práctico completo

Aquí tienes un modal básico funcional que muestra la estructura mínima necesaria:

<!DOCTYPE html>
<html lang="es">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Botón para activar el modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalBienvenida">
    Mostrar información
  </button>

  <!-- Modal -->
  <div class="modal fade" id="modalBienvenida" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <p class="p-4">¡Este es un modal básico funcionando!</p>
      </div>
    </div>
  </div>

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

Esta estructura básica ya es completamente funcional y se puede mostrar y ocultar haciendo clic en el botón activador o presionando la tecla Escape. El modal se cierra automáticamente al hacer clic fuera de él o usando estos métodos nativos del navegador.

La belleza de esta estructura radica en su simplicidad: con apenas tres elementos HTML y dos atributos data, tienes un modal completamente operativo que mantiene toda la funcionalidad esperada por los usuarios.

Contenido del modal: header, body y footer

Una vez establecida la estructura base del modal, es momento de organizar su contenido interno de forma coherente y funcional. Bootstrap proporciona tres secciones específicas que dividen el contenido del modal de manera lógica, cada una con un propósito claramente definido.

La división tripartita del contenido modal sigue patrones de diseño de interfaces establecidos, donde cada sección tiene responsabilidades específicas que mejoran tanto la usabilidad como la comprensión del usuario.

Estructura del header modal

El header del modal actúa como la cabecera identificativa que presenta el propósito del modal al usuario. Se estructura usando la clase .modal-header y típicamente contiene el título principal y el botón de cierre:

<div class="modal-content">
  <div class="modal-header">
    <h1 class="modal-title fs-5" id="modalLabel">
      Confirmar eliminación
    </h1>
    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  </div>
</div>

Elementos principales del header:

.modal-title: Contiene el título descriptivo del modal
.fs-5: Utilidad de tamaño que establece el tamaño de fuente apropiado
btn-close: Botón especializado para cerrar el modal
data-bs-dismiss="modal": Atributo que conecta el botón con la funcionalidad de cierre

El título del modal debe ser descriptivo y conciso, indicando claramente qué acción o información presenta el modal:

<div class="modal-header">
  <h1 class="modal-title fs-5">Agregar nuevo producto</h1>
  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>

Contenido principal con modal-body

El body constituye la sección central donde reside el contenido principal del modal. Utiliza la clase .modal-body y puede contener cualquier tipo de contenido HTML, desde texto simple hasta formularios complejos:

<div class="modal-body">
  <p>¿Está seguro de que desea eliminar este elemento? 
     Esta acción no se puede deshacer.</p>
</div>

Contenido típico del body:

Texto informativo: Explicaciones, advertencias o instrucciones
Formularios: Campos de entrada de datos usando los controles que ya conoces
Listas: Información estructurada con list groups
Alertas: Mensajes de estado usando componentes de alerta

Ejemplo con un formulario de contacto simple:

<div class="modal-body">
  <form>
    <div class="mb-3">
      <label for="nombreContacto" class="form-label">Nombre</label>
      <input type="text" class="form-control" id="nombreContacto">
    </div>
    <div class="mb-3">
      <label for="emailContacto" class="form-label">Email</label>
      <input type="email" class="form-control" id="emailContacto">
    </div>
    <div class="mb-3">
      <label for="mensajeContacto" class="form-label">Mensaje</label>
      <textarea class="form-control" id="mensajeContacto" rows="3"></textarea>
    </div>
  </form>
</div>

El body también puede incluir elementos visuales como imágenes, badges o contenido informativo estructurado:

<div class="modal-body">
  <div class="text-center mb-3">
    <img src="producto.jpg" class="img-fluid rounded" alt="Imagen del producto">
  </div>
  <h5>Producto Premium <span class="badge bg-success">Nuevo</span></h5>
  <p class="text-muted">Descripción detallada del producto con todas sus características principales.</p>
  <ul class="list-unstyled">
    <li><strong>Precio:</strong> €29.99</li>
    <li><strong>Disponibilidad:</strong> En stock</li>
    <li><strong>Garantía:</strong> 2 años</li>
  </ul>
</div>

Footer con botones de acción

El footer del modal proporciona los controles de acción que permiten al usuario interactuar con el contenido presentado. Se implementa con la clase .modal-footer y típicamente contiene botones alineados a la derecha:

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
    Cancelar
  </button>
  <button type="button" class="btn btn-danger">
    Eliminar
  </button>
</div>

Patrones comunes de botones en el footer:

Botón de cancelación: Siempre incluye data-bs-dismiss="modal" para cerrar sin acción
Botón de acción principal: Usa colores semánticos según el tipo de acción
Orden visual: Los botones destructivos van a la derecha, las acciones de cancelación a la izquierda

Ejemplo de footer para confirmación:

<div class="modal-footer">
  <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
    No, mantener
  </button>
  <button type="button" class="btn btn-primary">
    Sí, confirmar
  </button>
</div>

Para formularios dentro de modales, el footer puede incluir botones de envío:

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
    Cerrar
  </button>
  <button type="submit" class="btn btn-success">
    Enviar mensaje
  </button>
</div>

Ejemplo completo integrado

Aquí tienes un modal completo que demuestra cómo las tres secciones trabajan juntas para crear una experiencia coherente:

<!-- Botón activador -->
<button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modalInformacion">
  Ver detalles
</button>

<!-- Modal completo -->
<div class="modal fade" id="modalInformacion" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <!-- Header -->
      <div class="modal-header">
        <h1 class="modal-title fs-5">Información del pedido</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      
      <!-- Body -->
      <div class="modal-body">
        <div class="alert alert-info">
          <strong>Estado:</strong> Pedido confirmado y en preparación
        </div>
        <p><strong>Número de pedido:</strong> #12345</p>
        <p><strong>Fecha estimada de entrega:</strong> 15 de enero de 2024</p>
        <p><strong>Dirección de envío:</strong> Calle Principal 123, Madrid</p>
        
        <h6 class="mt-3">Productos incluidos:</h6>
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between">
            <span>Producto A</span>
            <span class="text-muted">€19.99</span>
          </li>
          <li class="list-group-item d-flex justify-content-between">
            <span>Producto B</span>
            <span class="text-muted">€29.99</span>
          </li>
        </ul>
      </div>
      
      <!-- Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Cerrar
        </button>
        <button type="button" class="btn btn-primary">
          Descargar factura
        </button>
      </div>
      
    </div>
  </div>
</div>

Flexibilidad del contenido

Es importante recordar que no todas las secciones son obligatorias. Puedes crear modales efectivos usando solo las secciones que necesites:

Modal solo con body:

<div class="modal-content">
  <div class="modal-body text-center">
    <h5>Operación completada</h5>
    <p>Los cambios se han guardado correctamente.</p>
    <button type="button" class="btn btn-success" data-bs-dismiss="modal">
      Entendido
    </button>
  </div>
</div>

Modal sin footer:

<div class="modal-content">
  <div class="modal-header">
    <h1 class="modal-title fs-5">Galería de imágenes</h1>
    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  </div>
  <div class="modal-body">
    <img src="imagen-grande.jpg" class="img-fluid" alt="Imagen ampliada">
  </div>
</div>

Esta estructura modular te permite adaptar cada modal a su propósito específico, manteniendo siempre la coherencia visual y funcional que caracteriza a Bootstrap.

Tamaños y personalización básica

Bootstrap proporciona múltiples opciones de tamaño para los modales, permitiendo adaptar las dimensiones del componente según el tipo y cantidad de contenido que necesites mostrar. Además, las utilidades de color y espaciado que ya dominas se integran perfectamente para personalizar la apariencia visual.

Variaciones de tamaño predefinidas

Los tamaños de modal se controlan aplicando clases adicionales al elemento .modal-dialog. Bootstrap 5.3 incluye cinco opciones de tamaño que cubren desde ventanas compactas hasta modales que ocupan toda la pantalla.

Modal pequeño (.modal-sm)

El tamaño pequeño es ideal para confirmaciones rápidas, alertas o acciones simples que requieren mínimo contenido:

<div class="modal fade" id="modalPequeño" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-6">Confirmar</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0">¿Eliminar este elemento?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">No</button>
        <button type="button" class="btn btn-sm btn-danger">Sí</button>
      </div>
    </div>
  </div>
</div>

Modal por defecto (sin clase adicional)

El tamaño estándar funciona bien para la mayoría de casos de uso, incluyendo formularios de contacto simples y ventanas informativas:

<div class="modal fade" id="modalContacto" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5">Contacta con nosotros</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email">
          </div>
          <div class="mb-3">
            <label for="mensaje" class="form-label">Mensaje</label>
            <textarea class="form-control" id="mensaje" rows="4"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Enviar</button>
      </div>
    </div>
  </div>
</div>

Modal grande (.modal-lg)

Los modales grandes proporcionan más espacio para formularios extensos, galerías de imágenes o contenido detallado:

<div class="modal fade" id="modalGaleria" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5">Galería de productos</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row g-2">
          <div class="col-md-6">
            <img src="producto1.jpg" class="img-fluid rounded" alt="Producto 1">
          </div>
          <div class="col-md-6">
            <img src="producto2.jpg" class="img-fluid rounded" alt="Producto 2">
          </div>
          <div class="col-md-6">
            <img src="producto3.jpg" class="img-fluid rounded" alt="Producto 3">
          </div>
          <div class="col-md-6">
            <img src="producto4.jpg" class="img-fluid rounded" alt="Producto 4">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

Modal extra grande (.modal-xl)

El tamaño extra grande es perfecto para mostrar contenido extenso como documentos, tablas amplias o interfaces complejas:

<div class="modal fade" id="modalDocumento" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5">Términos y condiciones</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-8">
            <h6>1. Condiciones generales</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            <h6>2. Política de privacidad</h6>
            <p>Sed do eiusmod tempor incididunt ut labore et dolore...</p>
          </div>
          <div class="col-md-4">
            <div class="card">
              <div class="card-body">
                <h6 class="card-title">Resumen</h6>
                <ul class="list-unstyled">
                  <li>✓ Protección de datos</li>
                  <li>✓ Uso responsable</li>
                  <li>✓ Derechos del usuario</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Rechazar</button>
        <button type="button" class="btn btn-success">Aceptar términos</button>
      </div>
    </div>
  </div>
</div>

Modal pantalla completa (.modal-fullscreen)

Para casos donde necesites maximizar el espacio disponible, el modal de pantalla completa ocupa toda la ventana del navegador:

<div class="modal fade" id="modalCompleto" tabindex="-1">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-4">Editor de texto</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <textarea class="form-control h-100" placeholder="Escribe tu contenido aquí..."></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Descartar</button>
        <button type="button" class="btn btn-primary">Guardar documento</button>
      </div>
    </div>
  </div>
</div>

Personalización con utilidades de color

Las utilidades de color que ya conoces se aplican perfectamente a los elementos del modal para crear variaciones temáticas y mejorar la comunicación visual.

Headers con colores temáticos:

<!-- Modal de éxito -->
<div class="modal-header bg-success text-white">
  <h1 class="modal-title fs-5">Operación completada</h1>
  <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>

<!-- Modal de advertencia -->
<div class="modal-header bg-warning text-dark">
  <h1 class="modal-title fs-5">Atención requerida</h1>
  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>

<!-- Modal de error -->
<div class="modal-header bg-danger text-white">
  <h1 class="modal-title fs-5">Error en la operación</h1>
  <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>

Personalización del contenido completo:

<div class="modal fade" id="modalPersonalizado" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content border-primary">
      <div class="modal-header bg-primary text-white">
        <h1 class="modal-title fs-5">Información importante</h1>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body bg-light">
        <div class="alert alert-primary border-primary">
          <strong>Novedad:</strong> Nueva función disponible en tu cuenta.
        </div>
        <p class="text-muted">Descubre las últimas mejoras que hemos implementado para mejorar tu experiencia.</p>
      </div>
      <div class="modal-footer bg-light border-top-0">
        <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Más tarde</button>
        <button type="button" class="btn btn-primary">Explorar ahora</button>
      </div>
    </div>
  </div>
</div>

Personalización con utilidades de espaciado

Las utilidades de margin y padding permiten ajustar el espaciado interno de los modales para adaptar la densidad visual del contenido:

<div class="modal-content">
  <div class="modal-header py-2">
    <h1 class="modal-title fs-6">Modal compacto</h1>
    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  </div>
  <div class="modal-body py-2">
    <p class="mb-2">Contenido con espaciado reducido para modales informativos breves.</p>
  </div>
  <div class="modal-footer py-2">
    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cerrar</button>
  </div>
</div>

Modal con espaciado amplio:

<div class="modal-content">
  <div class="modal-header py-4">
    <h1 class="modal-title fs-4">Bienvenido</h1>
    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  </div>
  <div class="modal-body py-4">
    <div class="text-center mb-4">
      <div class="bg-success rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 64px; height: 64px;">
        <span class="text-white fs-3">✓</span>
      </div>
    </div>
    <h5 class="text-center mb-3">Cuenta creada exitosamente</h5>
    <p class="text-center text-muted">Ya puedes comenzar a usar todas las funciones de la plataforma.</p>
  </div>
  <div class="modal-footer py-4 justify-content-center">
    <button type="button" class="btn btn-success btn-lg px-5">Comenzar</button>
  </div>
</div>

Ejemplo práctico integrado

Aquí tienes un conjunto de modales que demuestra las diferentes combinaciones de tamaño y personalización trabajando juntas:

<!-- Botones activadores -->
<div class="d-flex gap-2 flex-wrap">
  <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalConfirmacion">
    Confirmación rápida
  </button>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalFormulario">
    Formulario estándar
  </button>
  <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalGaleriaGrande">
    Galería amplia
  </button>
</div>

<!-- Modal pequeño personalizado -->
<div class="modal fade" id="modalConfirmacion" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content border-warning">
      <div class="modal-header bg-warning text-dark py-2">
        <h1 class="modal-title fs-6">⚠️ Confirmar</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body py-3 text-center">
        <p class="mb-0">¿Continuar con esta acción?</p>
      </div>
      <div class="modal-footer py-2 justify-content-center">
        <button type="button" class="btn btn-sm btn-secondary me-2" data-bs-dismiss="modal">No</button>
        <button type="button" class="btn btn-sm btn-warning">Sí</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal estándar con formulario -->
<div class="modal fade" id="modalFormulario" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h1 class="modal-title fs-5">Solicitar información</h1>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="nombre" class="form-label">Nombre completo</label>
            <input type="text" class="form-control" id="nombre" required>
          </div>
          <div class="mb-3">
            <label for="telefono" class="form-label">Teléfono</label>
            <input type="tel" class="form-control" id="telefono">
          </div>
          <div class="mb-3">
            <label for="consulta" class="form-label">Consulta</label>
            <textarea class="form-control" id="consulta" rows="3" required></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary">Enviar solicitud</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal grande para galería -->
<div class="modal fade" id="modalGaleriaGrande" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-success text-white">
        <h1 class="modal-title fs-5">🖼️ Galería de proyectos</h1>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row g-3">
          <div class="col-md-4">
            <div class="card">
              <div class="card-body text-center">
                <div class="bg-primary text-white rounded mb-2 p-3">Proyecto A</div>
                <span class="badge bg-success">Completado</span>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card">
              <div class="card-body text-center">
                <div class="bg-warning text-dark rounded mb-2 p-3">Proyecto B</div>
                <span class="badge bg-warning">En progreso</span>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card">
              <div class="card-body text-center">
                <div class="bg-info text-white rounded mb-2 p-3">Proyecto C</div>
                <span class="badge bg-secondary">Planificado</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-bs-dismiss="modal">Cerrar galería</button>
      </div>
    </div>
  </div>
</div>

Consejos para la selección de tamaños

Elige el tamaño según el contenido:

.modal-sm: Confirmaciones, alertas simples, acciones rápidas
Tamaño por defecto: Formularios estándar, información moderada
.modal-lg: Galerías, formularios extensos, contenido detallado
.modal-xl: Documentos largos, tablas amplias, interfaces complejas
.modal-fullscreen: Editores, aplicaciones completas, máximo contenido

La personalización visual debe mantener coherencia con el propósito del modal: colores de éxito para confirmaciones positivas, advertencia para acciones irreversibles, y colores neutros para información general. Esta aproximación garantiza que los modales no solo funcionen correctamente sino que también comuniquen efectivamente su propósito al usuario.

Fuentes y referencias

Documentación oficial y recursos externos para profundizar en Bootstrap

Documentación oficial de Bootstrap

Alan Sastre

Ingeniero de Software y formador, CEO en CertiDevs

Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, Bootstrap es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.

Más tutoriales de Bootstrap

Explora más contenido relacionado con Bootstrap y continúa aprendiendo con nuestros tutoriales gratuitos.

Ver más tutoriales de Bootstrap Explorar todas las tecnologías

Aprendizajes de esta lección

Comprender la estructura básica de un modal en Bootstrap y sus elementos principales.
Aprender a activar modales mediante atributos data y botones.
Conocer la organización interna del contenido del modal: header, body y footer.
Explorar las opciones de tamaños predefinidos y cómo personalizar visualmente los modales.
Aplicar utilidades de color y espaciado para adaptar modales a diferentes necesidades y contextos.

Cursos que incluyen esta lección

Esta lección forma parte de los siguientes cursos estructurados con rutas de aprendizaje

Bootstrap CSS: componentes

Ruta de aprendizaje completa con lecciones y ejercicios