{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Modals

Crea ventanas modales interactivas para diálogos y confirmaciones.

Los modals son ventanas emergentes que aparecen sobre el contenido. Son perfectos para diálogos de confirmación, formularios de login o cualquier contenido que quieras mostrar sin cambiar de página.

  • modal: contenedor principal
  • modal-dialog: estructura del diálogo
  • modal-content: contenido interno
  • modal-header, modal-body, modal-footer
  • data-bs-toggle="modal"

Estructura del modal

  • modal: contenedor principal
  • modal-dialog: estructura del diálogo
  • modal-content: contenido interno
  • modal-header, modal-body, modal-footer

Cómo abrirlo

  • data-bs-toggle="modal"
  • data-bs-target="#miModal"
  • El botón debe tener estas propiedades
Bootstrap
06

Modals

Crea ventanas modales interactivas para diálogos y confirmaciones.

¿Cuánto sabes de Bootstrap?

Código del tema: modal

📘 Teoría

Estructura del modal

  • modal: contenedor principal
  • modal-dialog: estructura del diálogo
  • modal-content: contenido interno
  • modal-header, modal-body, modal-footer

Cómo abrirlo

  • data-bs-toggle="modal"
  • data-bs-target="#miModal"
  • El botón debe tener estas propiedades

🧪 Aprende probando

Ejemplo Demo interactiva: playground de modal Prueba tamaños, alineación y scroll interno para entender qué variante encaja mejor según el contexto.
⌄

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre Bootstrap.

Test de Bootstrap
Recursos del curso 14
📘 Glosario 🎬 Vídeos 🔗 Enlaces 🧩 Snippets
‹
Lección 05
Formularios con Bootstrap
Lección 07
Navbar y Navegación
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com