Bootstrap 5-Modal
The Modal component is a dialog box/popup window that is displayed on top of the current page:
Basic Modal example
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Modal Example </h2>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal" >
Open modal </button>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body"> Modal body.. </div>
<div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</body>
</html>
Modal Classes
| class | Description |
|---|---|
| class="modal fade" | Use the .fade class to add a fading effect when opening and closing the modal: |
| class="modal-dialog modal-sm | Change the size of the modal by adding the .modal-sm class for small modals (max-width 300px), .modal-lg class for large modals (max-width 800px), or .modal-xl for extra large modals (max-width 1140px). Default is 500px max-widt |
| class="modal-dialog modal-fullscreen" | If you want the modal to span the whole width and height of the page, use the .modal-fullscreen class: |
| class="modal-dialog modal-dialog-scrollable | However, it is possible to only scroll inside the modal, instead of the page itself, by adding .modal-dialog-scrollable to .modal-dialog: |