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.

View Output

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:

View Output

Remove Fade Effect

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

View Output

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