Quiero que un modal sea el 80% aproximadamente del ancho de la pantalla. modal-lg
no es lo suficientemente grande. Esto:
.modal .modal-dialog {
width: 80%;
}
No funciona con Bootstrap 4.
Quiero que un modal sea el 80% aproximadamente del ancho de la pantalla. modal-lg
no es lo suficientemente grande. Esto:
.modal .modal-dialog {
width: 80%;
}
No funciona con Bootstrap 4.
Bootstrap 3
Puede crear o simplemente anular el modal-lg
por defecto de Bootstrap haciendo lo siguiente:
.modal-lg {
max-width: 80%;
}
Si no funciona, simplemente agregue !important
para que se vea así
.modal-lg {
max-width: 80% !important;
}
Ahora llame al modal-lg
.
Para Bootstrap 4 consulte la respuesta de @kitsu.eb. También tenga en cuenta que el uso de utilidades de Bootstrap 4 podría romper la capacidad de respuesta.
Bootstrap 4 incluye utilidades de dimensionamiento. Puedes cambiar el tamaño al 25/50/75/100% del ancho de la página (ojalá hubiera incluso más incrementos).
Para usar estos, reemplazaremos la clase modal-lg
. Tanto el ancho predeterminado como modal-lg
utilizan max-width
de css para controlar el ancho del modal, así que primero agrega la clase mw-100
para deshabilitar efectivamente max-width
. Luego simplemente agrega la clase de ancho que desees, por ejemplo w-75
.
Ten en cuenta que debes colocar las clases mw-100
y w-75
en el div con la clase modal-dialog
, no en el div modal
por ejemplo,
...
Además, incluso podemos usar la conocida clase container
(en lugar de especificar el tamaño), como:
...
Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.