Como Crear una Ventana Modal con Bootstrap 4

Bootstrap

Uno de los Frameworks para diseño Front-end más populares, Bootstrap nos da la posibilidad de crear interfaces amigables, intuitivas y dinámicas, hay aplicaciones web que requieren de una funcionalidad Ventana Modal para llenar formularios, mostrar mensajes de alertas, etc. En este artículo te explicaremos todos los detalles para que logres crear tu primera Ventana Modal con Bootstrap 4.

Para crear una ventana modal debes de tener instalado Bootstrap en tu Proyecto para ellos antes de continuar con el tutorial te recomendamos leer nuestro artículo Que es Bootstrap, Historia y tu Primer Hola Mundo para que estés familiarizado con este tutorial e instales Bootstrap.

Para crear una ventana modal debemos de crear 2 elementos esenciales, un botón para al hacer click muestre el Modal y otro contenido que es el Modal que se va mostrar en la Pantalla

Primero creamos el botón

Cuando se hace click en el botón ‘Mostrar modal’ nos va cargar una ventana Modal, ahora creamos el contenido de la Ventana Modal a Mostrarse

Ahora cada ves que hagas Clic en el botón ‘Mostrar modal’ te va cargar el Modal con su contenido interior

Configurar el Modal

Bootstrap nos brinda sencillas Clases para usarlas de inmediato y cada una de estas clases nos carga un Modal con una acción específica, esta clase solo se la debes asignar al Modal, el boton sigue siendo el mismo, por lo que en los siguientes ejemplos solo Mostraremos el cambio de la clase en el Modal

Centrar Verticalmente

Solo agrega la clase .modal-dialog-centered después de la clase .modal-dialog para centrar el Modal verticalmente

Y tendrás el Modal Centrado Verticalmente

Usar la Grilla de Bootstrap en el Modal

Bootstrap tambien nos permite desplegar grillas de columnas y atributos nativos de Bootstrap para organizar el contenido en el Modal, para esto solo debes agregar un contenedor o capa (div) con la clase .container-fluid dentro del contenedor con la clase .modal-body

Dentro del contenedor o capa (div) con la clase .container-fluid se deben colocar la grilla con los contenidos que deseas ordenar, el trabajo con la grilla es como si lo hicieras en cualquier otro lado de tu página

Ahora obtendremos la Grilla dentro de nuestro modal que nos servira para crear columnas responsives a las pantallas

Tamaños del Modal

Bootstrap nos brinda 2 medidas o tamaños para el Modal uno de ellos es Pequeño y Otro Grande, para mostrar uno de estos modales debes de usar el conjunto de clases que nos brinda, por ejemplo a continuación veremos los modales Pequeño y Grande en el código colocamos los 2 modales separados con comentario HTML

Como puedes ver con Bootstrap es muy fácil implementar elementos a tu proyecto, dentro de el Modal  puedes colocar Formularios, Imagenes, Listas, etc. También videos para esto necesitas una configuración adicional con jQuery para darle soporte de videos en Modal.

También existen métodos jQuery que puedes usar con Bootstrap, esto lo podemos ver en otro artículo, vayamos por Pasos.

 

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

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required