Logo
hummingbird

Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Example

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Demo modal</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title text-base font-semibold" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn btn-icon ms-auto" data-bs-dismiss="modal" aria-label="Close">
          <span class="icon-[material-symbols--close-rounded] text-base"></span>
        </button>
      </div>
      <div class="modal-body">
        This is a modal window. You can add any content here—text, buttons, forms, or media.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-subtle-neutral me-2" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-subtle-primary">Confirm</button>
      </div>
    </div>
  </div>
</div>
Static backdrop

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Static backdrop modal</button>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title text-base font-semibold" id="staticBackdropLabel">Modal title</h1>
        <button type="button" class="btn btn-icon ms-auto" data-bs-dismiss="modal" aria-label="Close">
          <span class="icon-[material-symbols--close-rounded] text-base"></span>
        </button>
      </div>
      <div class="modal-body">
        This is a modal window. You can add any content here—text, buttons, forms, or media.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-subtle-neutral me-2" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-subtle-primary">Confirm</button>
      </div>
    </div>
  </div>
</div>
Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

You can also create a scrollable modal that allows scrolling the modal body by adding .modal-dialog-scrollable to .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>
Vertically centered

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

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->

<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>
Toggle between modals

HTML

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title text-base font-semibold" id="exampleModalToggleLabel">Modal 1</h1>
        <button type="button" class="btn btn-icon ms-auto" data-bs-dismiss="modal" aria-label="Close">
          <span class="icon-[material-symbols--close-rounded] text-base"></span>
        </button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title text-base font-semibold" id="exampleModalToggleLabel2">Modal 2</h1>
        <button type="button" class="btn btn-icon ms-auto" data-bs-dismiss="modal" aria-label="Close">
          <span class="icon-[material-symbols--close-rounded] text-base"></span>
        </button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button>
Optional sizes
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Fullscreen Modal
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen">
  ...
</div>

<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>