Bootstrap 5 Modal

Display a Bootstrap-styled modal dialog box with a minimum of code.

Bootstrap enables you to add a modal dialog box to your site. A modal is a dialog box that takes the focus while the rest of the screen is dimmed or grayed out. This forces the user to take action on the dialog box before continuing.

To create a modal, use the .modal class along with various other .modal-* classes to define each section of the modal.

Static Backdrop

The modal in the previous example will close whenever the user clicks outside of the modal. You can remove this functionality by doing the following:

Remove Fade Effect

You can remove the .fade class to get rid of the fade-in/fade-out effect.

There's a lot more you can do with Bootstrap modals. See the Bootstrap documentation for a detailed rundown.