Examples
Following are basic example of modals, just toggle a working modal demo by clicking the buttons below.
Add .modal-dialog-scrollable
to .modal-dialog
. for scrollable modal
and Add .modal-dialog-centered
to .modal-dialog
to vertically center the modal.
For small, large, and extra large modal. use .modal-{sm|lg|xl}
to .modal-dialog
.
Code Example
<!-- Default modal --> <button type="button" class="btn btn-nmw btn-primary" data-bs-toggle="modal" data-bs-target="#defaultModal"> Modal default </button> <!-- Modal --> <div class="modal fade" id="defaultModal" tabindex="-1" aria-labelledby="defaultModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="defaultModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique earum necessitatibus nesciunt! Quia id expedita asperiores voluptatem odit quis fugit sapiente assumenda sunt voluptatibus atque facere autem, omnis explicabo.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-nmw btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-nmw btn-primary">Save changes</button> </div> </div> </div> </div> <!-- Static backdrop modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop"> Launch static backdrop modal </button> <!-- Modal --> <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">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">Understood</button> </div> </div> </div> </div> <!-- Toggle between modals --> <a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a> <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Show a second modal and hide this one with the button below. </div> <div class="modal-footer"> <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button> </div> </div> </div> </div> <div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Hide this modal and show the first with the button below. </div> <div class="modal-footer"> <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button> </div> </div> </div> </div>
Fullscreen Modal
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog
.
Class | Availability |
---|---|
.modal-fullscreen | Always |
.modal-fullscreen-sm-down | Below 576px |
.modal-fullscreen-md-down | Below 768px |
.modal-fullscreen-lg-down | Below 992px |
.modal-fullscreen-xl-down | Below 1200px |
.modal-fullscreen-xxl-down | Below 1400px |
Code Example
<!-- Full screen modal --> <div class="modal-dialog modal-fullscreen-sm-down"> ... </div>