MODAL WINDOWS
The Modal component is a pop-up dialog box that appears at the top of the current page. The following example shows how to create a basic modal:
ADD AN ANIMATION
Use the .fade class to add a fade effect when opening and closing the modal window:
<div class=”modal fade“>
MODAL SIZE
Modify the modal size by adding the .modal-sm class for small modals (max width 300px), .modal-lg class for large modals (max 800px width) or .modal-xl for extra large modals (max – width 1140px). The default is 500px maximum width. Add the size class to the
element with the .modal-dialog class:
<div class=”modal-dialog modal-sm“>
MODAL FULLSCREEN
If you want the modal to span the entire width and height of the page, use the .modal-fullscreen class:
<div class=”modal-dialog modal-fullscreen“>
RESPONSIVE FULLSCREEN MODAL
You can also control when the modal should be full screen, with classes .modal-fullscreen-*-*:
CENTER A MODAL
Centers the modal vertically and horizontally within the page, with the class .modal-dialog-centered:
<div class=”modal-dialog modal-dialog-centered“>
SCROLLING A MODAL
When you have a lot of content within the modal, add a scroll bar to the page. Look at the following example to understand it:
Leave A Comment