Bootstrap 5

Bootstrap Tutorials

Bootstrap 5 Modal

Bootstrap 5 Modal



Bootstrap 5 Modal is a dialog box/popup window that is displayed on top of the current page. It can be used for lightboxes, user notifications, or completely custom content.


Bootstrap 5 Modal Classes:-


  • Use .fade class to add a fading effect when opening and closing the modal.
  • Use .modal-sm class for small modals (max-width 300px).
  • Use .modal-lg class for large modals  (max-width 800px).
  • Use .modal-xl for extra large modals  (max-width 1140px).
  • Use .modal-fullscreen if you want the modal to span the whole width and height of the page.
  • Use .modal-dialog-centered if you want to center the modal vertically and horizontally within the page.

Code Explanation

All Tutorials related to Bootstrap Tutorials

All Sections related to Bootstrap 5