//Modal

Variants 𓃠

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
⟢ How it works ⤵
  • Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
  • You can also create a scrollable modal that allows scrolling the modal body by adding .modal-dialog-scrollable to .modal-dialog.
⟢ Live demo ⤵

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Modal Elements ⚡
↳ Example 1
⟢ NFT buy modal ⤵
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-fullscreen.
↳ Example 2
⟢ Create NFTs ⤵
You can also create a scrollable modal that allows scrolling the modal body by adding .modal-dialog-scrollable to .modal-dialog.
Drop

A drop is the release of a new project. Items will be revealed after they have been purchased.

↳ Example 3
⟢ Wallet Connect ⤵
You can also create a scrollable modal that allows scrolling the modal body by adding .modal-dialog.
25+ Pre-Made Demos