31 votos

Ancho del modal (aumentar)

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.

59voto

claudios Puntos 3294

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.

12voto

kitsu.eb Puntos 587

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:

            ...

7voto

Joel Enanod Jr Puntos 18

Para una respuesta responsiva.

@media (min-width: 992px) {
  .modal-dialog {
    max-width: 80%;
  }
}

2voto

Unknown_Coder Puntos 585

Simplemente use !important después de darle ancho a esa clase que está sobrescribiendo tu clase.

Por ejemplo

.modal .modal-dialog {
  width: 850px !important;
}

Espero que esto funcione para ti.

2voto

CeezS Puntos 21

En Bootstrap 4 tienes que usar el atributo 'max-width' y luego funciona perfectamente.

Iteramos.com

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.

Powered by:

X