Modals
Default Modal
Use modal-dialog class to show default modal.
Vertically Centered Modal
Use modal-dialog-centered class to show vertically center the modal.
Grids in Modals
Use container-fluid class within the modal-body to utilize the Bootstrap grid system within a modal by nesting.
Static Backdrop Modal
Use data-bs-backdrop="static" to modal not to close when clicking outside the modal.
Toggle Between Modal
Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes. Please note multiple modals cannot be open at the same time. this method simply toggles between two separate modals.
Scrollable Modal
Use modal-dialog-scrollable class to create a modal scrollable.
Varying Modal Content
Optional Sizes
Use modal-fullscreen, modal-xl, modal-lg, or modal-sm class to modal-dialog class to set different size modal respectively.
Fullscreen Responsive Modals
Below mentioned modifier classes are used to show fullscreen modal as per minimum screen requirement.
Animation Modals
Use fadeInRight, fadeInLeft, fadeInUp, flip, or zoomIn class to modal class to set different modal with animation effect respectively.
Modal Positions
Use modal-dialog-right, modal-dialog-bottom, or modal-dialog-bottom-right class to modal-dialog class to set modal at different positions respectively.