Modal

Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. Rence Material applies Material Design elevation and typography to all modals automatically.

Tip: For Material-style alert dialogs (simple confirm/cancel popups), see the Dialogs page.

Example

A modal has three required parts: trigger button, backdrop overlay, and the .modal container with .modal-dialog and .modal-content.

HTML

<!-- Modal trigger button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal markup -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content shadow">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal body content goes here. You can add any HTML, forms, or components.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Scrollable modal

For long content, add .modal-dialog-scrollable to scroll within the modal body rather than the page.

HTML

<!-- Scrollable modal for long content -->
<div class="modal fade" id="scrollModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
    <div class="modal-content shadow">
      <div class="modal-header">
        <h5 class="modal-title">Scrollable modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <!-- Long content scrolls within the modal body -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Optional sizes

Modals have three optional sizes available via modifier classes placed on .modal-dialog: .modal-sm, .modal-lg, and .modal-xl.

HTML

<!-- Modal sizes -->
<div class="modal-dialog modal-sm"> ... </div>    <!-- Small -->
<div class="modal-dialog">         ... </div>    <!-- Default -->
<div class="modal-dialog modal-lg"> ... </div>    <!-- Large -->
<div class="modal-dialog modal-xl"> ... </div>    <!-- Extra large -->