CSS !important

    Hallo,

    ich habe eine Frage zu CSS und Bootstrap 4 : "wieso kann ich nicht über CSS die (Modal(Bootstrap) Breite ändern)?"

    CSS
    .modal-xl {
	width: 100% !important;
}

    Hey!

    Das Modal bekommt seine Breite in Bootstrap 4 über die Klasse .modal-dialog gesteuert – dort ist per CSS ein max-width hinterlegt.
    Wenn du nur width überschreibst, bringt das nichts, weil die Bootstrap-Regel stärker ist.

    Lösung:

    CSS
    .modal-dialog {
  max-width: 800px !important;
}

    Oder du gibst deinem Modal eine eigene Klasse (z. B. .modal-dialog.my-modal) und setzt dort die gewünschte Breite.

    Kurz gesagt: In Bootstrap 4 musst du immer mit max-width arbeiten, nicht mit width.