In dem nach dem Text folgenden Beispiel haben wir ein Modal erstellt, das beim Klicken auf einen Button geöffnet wird. Wir haben die Bootstrap-5-Klasse modal-lg auf die modal-dialog angewendet, um die Größe des Modals auf "groß" anzupassen. Wenn Du das Modal stattdessen kleiner machen möchtest, kannst Du die Bootstrap-5-Klassen modal-sm oder modal-xs anstelle von modal-lg verwenden.
Du kannst die Größe Deines eigenen Modals anpassen, indem Du die entsprechende Bootstrap-5-Klasse auf die modal-dialog anwendest und die Größe an Deine Anforderungen anpasst.
Mit Bootstrap 5 kannst Du schnell und einfach die Größe eines Modals anpassen, um es an Deine Anforderungen anzupassen und den Nutzern Deiner Webseite eine verbesserte Benutzererfahrung zu bieten.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Modal Size Example</title>
<!-- Bootstrap-5 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Öffne das Modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal-Titel</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
</div>
<div class="modal-body">
<p>Der Inhalt des Modals wird hier angezeigt.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
<button type="button" class="btn btn-primary">Speichern</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap-5 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
</body>
</html>