Modal

A modal is a dialog shown over the page, for a confirmation, a form or other content the user has to deal with before going back to the page.

Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

Default markup

To create a modal, you need to add a .modal element to the document. Inside the .modal, you need to add a .modal-dialog element, which contains a .modal-content element. The .modal-content element contains the modal's header, body, and footer.

<div class="modal" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">...</div>
      <div class="modal-body">...</div>
      <div class="modal-footer">...</div>
    </div>
  </div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<div class="modal" id="exampleModal" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde. </div>
      <div class="modal-footer">
        <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>

Prompt and alert

A modal also works as a prompt or an alert: a short message with one or two buttons.

<div class="modal" id="exampleModal2" tabindex="-1">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-status bg-danger"></div>
      <div class="modal-body text-center py-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M12 9v2m0 4v.01" />
          <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
        </svg>
        <h3>Are you sure?</h3>
        <div class="text-secondary">Do you really want to remove 84 files? What you've done cannot be undone.</div>
      </div>
      <div class="modal-footer">
        <div class="w-100">
          <div class="row">
            <div class="col">
              <a href="#" class="btn w-100" data-bs-dismiss="modal">Cancel</a>
            </div>
            <div class="col">
              <a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal">Delete 84 items</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal" id="exampleModal3" tabindex="-1">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-status bg-success"></div>
      <div class="modal-body text-center py-4">
        <!-- Download SVG icon from http://tabler.io/icons/icon/circle-check -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon mb-2 text-green icon-lg">
          <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
          <path d="M9 12l2 2l4 -4" />
        </svg>
        <h3>Payment succeeded</h3>
        <div class="text-secondary">Your payment of $290 has been successfully submitted. Your invoice has been sent to <a href="mailto:[email protected]">[email protected]</a>.</div>
      </div>
      <div class="modal-footer">
        <div class="w-100">
          <div class="row">
            <div class="col">
              <a href="#" class="btn w-100" data-bs-dismiss="modal">Go to dashboard</a>
            </div>
            <div class="col">
              <a href="#" class="btn btn-success w-100" data-bs-dismiss="modal">View invoice</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

A form inside a modal keeps the user on the page. Put the fields in the body and the submit button in the footer.

<div class="modal" id="exampleModal4" tabindex="-1">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">New report</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">Name</label>
          <input type="text" class="form-control" name="example-text-input" placeholder="Your report name" />
        </div>
        <label class="form-label">Report type</label>
        <div class="form-selectgroup-boxes row mb-3">
          <div class="col-md-6">
            <label class="form-selectgroup-item">
              <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked />
              <span class="form-selectgroup-label d-flex align-items-center p-3">
                <span class="me-3">
                  <span class="form-selectgroup-check"></span>
                </span>
                <span class="form-selectgroup-label-content">
                  <span class="form-selectgroup-title strong mb-1">Simple</span>
                  <span class="d-block text-secondary"> Provide only basic data needed for the report </span>
                </span>
              </span>
            </label>
          </div>
          <div class="col-md-6">
            <label class="form-selectgroup-item">
              <input type="radio" name="report-type" value="1" class="form-selectgroup-input" />
              <span class="form-selectgroup-label d-flex align-items-center p-3">
                <span class="me-3">
                  <span class="form-selectgroup-check"></span>
                </span>
                <span class="form-selectgroup-label-content">
                  <span class="form-selectgroup-title strong mb-1">Advanced</span>
                  <span class="d-block text-secondary"> Insert charts and additional advanced analyses to be inserted in the report </span>
                </span>
              </span>
            </label>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-8">
            <div class="mb-3">
              <label class="form-label">Report url</label>
              <div class="input-group input-group-flat">
                <span class="input-group-text">
                  <a href="https://tabler.io/reports/">https://tabler.io/reports/</a>
                </span>
                <input type="text" class="form-control ps-0" value="report-01" autocomplete="off" />
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="mb-3">
              <label class="form-label">Visibility</label>
              <select class="form-select">
                <option value="1" selected>Private</option>
                <option value="2">Public</option>
                <option value="3">Hidden</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label">Client name</label>
              <input type="text" class="form-control" />
            </div>
          </div>
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label">Reporting period</label>
              <input type="date" class="form-control" />
            </div>
          </div>
          <div class="col-lg-12">
            <div>
              <label class="form-label">Additional information</label>
              <textarea class="form-control" rows="3"></textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">Cancel</a>
        <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
          <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M12 5l0 14" />
            <path d="M5 12l14 0" />
          </svg> Create new report
        </a>
      </div>
    </div>
  </div>
</div>

Blurred backdrop

Add modal-blur next to modal to blur the page behind the dialog instead of only dimming it.

<div
  class="modal modal-blur fade"
  id="modal-blurred"
  tabindex="-1"
  role="dialog"
  aria-hidden="true"
>
  <!-- modal-dialog -->
</div>

Full width modal

Add modal-full-width to the modal-dialog to let the dialog use the whole viewport width, minus the usual margin. Use it for content that needs the room, such as a wide table or a side-by-side comparison.

The Bootstrap size classes cover the smaller steps: modal-sm, modal-lg and modal-xl.

<div class="modal-dialog modal-full-width modal-dialog-centered" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Full width modal</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">Content</div>
  </div>
</div>

Accessibility

  • Set tabindex="-1" on the modal and point aria-labelledby at the title. Bootstrap then moves focus into the dialog, traps it while the dialog is open, and returns it to the trigger on close.
  • Give every modal a visible title. A dialog with no accessible name is announced as just "dialog".
  • Keep the close button labelled. btn-close has no text of its own, so it needs aria-label="Close".
  • Do not open a modal from inside another modal. Bootstrap supports one dialog at a time and the focus trap follows the last one opened.
  • A modal that must not be dismissed by accident takes data-bs-backdrop="static", but never remove the close control entirely - Escape is the only way out for many keyboard users.

SCSS variables

Use these SCSS variables to customize modals. The default values are:

$modal-inner-padding: 1.5rem;

$modal-footer-margin-between: 0.75rem;

$modal-dialog-margin: 0.5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;

$modal-title-line-height: $line-height-base;

$modal-content-color: var(--body-color);
$modal-content-bg: var(--bg-surface);
$modal-content-border-color: transparent;
$modal-content-border-width: var(--border-width);
$modal-content-border-radius: var(--border-radius-lg);
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: var(--box-shadow-sm);
$modal-content-box-shadow-sm-up: var(--box-shadow);

$modal-backdrop-bg: $backdrop-bg;
$modal-backdrop-opacity: $backdrop-opacity;
$modal-backdrop-blur: $backdrop-blur;

$modal-header-border-color: var(--border-color);
$modal-header-border-width: var(--border-width);
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: 1.5rem; // Keep this for backwards compatibility
$modal-header-height: 3.5rem;
$modal-header-bg: transparent;

$modal-footer-bg: var(--bg-surface-tertiary);
$modal-footer-border-color: $modal-header-border-color;
$modal-footer-border-width: var(--border-width);

$modal-sm: 380px;
$modal-md: 540px;
$modal-lg: 720px;
$modal-xl: 1140px;

$modal-fade-transform: translate(0, -1rem);
$modal-show-transform: none;
$modal-transition: transform 0.3s ease-out;
$modal-scale-transform: scale(1.02);
$modal-body-title-margin-bottom: 1rem;
$modal-footer-padding-y: 0.75rem;

$modal-status-size: $border-width-wide;

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

modal componentContainer element, hidden until Bootstrap opens it
modal-dialog partPositions and sizes the dialog inside the container
modal-content partThe visible panel
modal-header partTitle bar, usually with the close button
modal-title partHeading inside the header
modal-body partContent area
modal-footer partRow of actions at the bottom
modal-status partColored bar across the top edge, tinted with a bg-{color} utility
modal-blur styleBlurs the page behind the dialog instead of only dimming it
modal-dialog-centered modifierCenters the dialog vertically
modal-dialog-scrollable modifierScrolls the body instead of the whole page
modal-full-width modifierLets the dialog use the full viewport width
modal-fullscreen modifierFills the viewport; modal-fullscreen-{breakpoint}-down only below that width
modal-sm sizeSmall dialog
modal-lg sizeLarge dialog
modal-xl sizeExtra large dialog
Offcanvas

Sidebar panel that slides in from the edge of the viewport.

Toast

Display a lightweight alert notification with a toast.

On this page

130 sleek illustrations for your startup's visual identity.