Modals

Dialog overlays for focused content

Modals are dialog overlays for focused content. They sit above the page and block interaction with the rest of the UI until dismissed.

A modal has three sections: .modal-header with a title and close button, .modal-body for content, and .modal-footer for actions.

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button class="btn-close"
          data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Content</div>
      <div class="modal-footer">
        <button class="btn btn-primary">
          Save
        </button>
      </div>
    </div>
  </div>
</div>

Click to open a basic modal

14 / 37