Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Crear una Ventana Modal con Bootstrap 5 (HTML)

Como Crear una Ventana Modal con Bootstrap 5 (HTML)

Como Crear una Ventana Modal con Bootstrap 5 (HTML)

Demo Github

Bootstrap es un framework CSS que nos permite crear diferentes elementos en nuestra interfaz rápidamente.

Uno de los elementos que nos permite crear es una ventana modal o ventana emergente, el cual nos permite mostrar contenido en una ventana superpuesta, luego de presionar un botón o realizar alguna acción.

En este tutorial te enseñaré a Como Crear una Ventana Modal con Bootstrap 5 (HTML), vamos con ello.

Las ventanas modales son útiles para mostrar contenido a los usuarios de forma dinámica

Para hacer un modal con Bootstrap necesitamos ya haber instalado o importado Bootstrap en nuestro proyecto.

Hay muchas maneras y entornos en los que podemos usar Bootstrap.

Para este ejemplo trabajaremos en HTML y en otros tutoriales veremos como hacerlo en React, Angular, Vue u otros entornos.

Sigue los pasos que te indicaré a continuación para que todo salga sin problemas.

Importamos Bootstrap 5 mediante su CDN:


Colocamos un botón para abrir la ventana modal:


Ahora necesitamos crear el código de la ventana modal que se abrirá al presiona el botón anterior.

Yo suelo colocar el código de la ventana modal en la parte de abajo antes de cerrar la etiqueta body es decir antes de </body>


Tu puedes colocar el contenido que desees en tu ventana modal, yo he colocado un video y unos textos.

Entonces si presionamos el botón se nos abre nuestra ventana modal de Bootstrap sin problemas:

En tu ventana modal o emergente puedes agregar imágenes, emojis, videos y diferentes contenidos

Así de fácil puedes crear y abrir una ventana modal o emergente con Bootstrap.

Al inicio de este tutorial he colocado una demo para que veas el proyecto en acción y un enlace a un repositorio de GitHub con el código del proyecto.

Conclusión

En este tutorial has aprendido a Como Crear una Ventana Modal con Bootstrap 5 (HTML).

Si deseas personalizar o darle otras funciones a tu ventana modal, puedes leer la documentación oficial de Bootstrap 5 sobre el componente Modal.

Para dominar la creación de una ventana modal con Bootstrap, solo debes practicar varias veces los pasos mencionados en este tutorial, recuerda que la práctica hace al maestro.

Nota(s)

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil