The Modal component is a dialog box/popup window that is displayed on top of the current page:
The following example shows how to create a basic modal:
Use the .fade class to add a fading effect when opening and closing the modal:
<!-- Fading modal -->
<div class="modal fade" id="...">
<!-- Modal without animation -->
<div class="modal" id="...">
Change the size of the modal by adding the .modal-sm class for small modals, .modal-lg class for large modals, or .modal-xl for extra large modals.
Add the size class to the <div> element with class .modal-dialog:
Small Modal
<div class="modal-dialog modal-sm">
Large Modal
<div class="modal-dialog modal-lg">
Extra Large Modal
<div class="modal-dialog modal-xl">
By default, modals are "medium" in size.
Center the modal vertically and horizontally within the page, with the .modal-dialog-centered class:
<div class="modal-dialog modal-dialog-centered">