Modals

  1. Elements
  2. Modals

Modal examples

You must add data-bs-toggle="modal" and set data-bs-target attributes to initialize modal trigger

Disable backdrop behavior (don't close modal when backdrop clicked)

Apply .modal-dialog-scrollable to make modal body fixed and scrollable

Make your modal align center to page by applying .modal-dialog-centered

Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

You can insert any elements to modal body

Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes.

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-dialog.

© Clivax.
Crafted with by Codebucks