Is there a way to limit the size of a Bootstrap 5 modal dialog and backdrop?
The example below occupies 100% of the screen, can it be adjusted to cover only the parent main container?
<main class="container-fluid pt-4 px-4" style="height: 400px">
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Launch demo modal
</button>
<!-- Modal -->
<div
class="modal fade hide"
data-backdrop="false"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5
class="modal-title"
id="exampleModalLabel"
>
Modal title
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button
type="button"
class="btn btn-primary"
>
Save changes
</button>
</div>
</div>
</div>
</div>
</main>
The CSS I tried adding is below, but it's not working as expected.
.modal-dialog, .modal-backdrop {
/* supposed to take the height and width of parent container */
height: 100% !important;
width: 100% !important;
}
How it currently works: https://i.sstatic.net/0cyQK.jpg
What I want (or expected behavior): https://i.sstatic.net/HApxi.jpg