On this page

Modal

Use Bootstrap’s modal markup on a native <dialog>. Open and close with command / commandfor — no Modal plugin.

Sizes are minified and gzip. A plugin figure includes the Bootstrap runtime that plugin imports. Shipping every plugin is `bootstrap.bundle.min.js` at 23.3 KB gzip, not the sum of these rows.
	What runs it	JavaScript
Bootstrap 5.3	Modal plugin (backdrop, focus trap, scrollbar)	7.3 KB gzip
This repo	dialog with command and commandfor	0 KB

When those APIs are missing, this page also loads invoker-commands.js (0.8 KB gzip) and dialog-closedby.js (0.5 KB gzip). See Polyfills.

Markup this component accepts. The full inventory is /components.json.
Avoid	`command` works on `<button>`, not `<a href>`. No `.modal-backdrop` element. The `<dialog>` has `::backdrop`. Do not mix `command="close"` with `<form method="dialog">` on the same control. A submit button’s `value` is the returnValue.

How it works

command="show-modal" and commandfor="id" replace data-bs-toggle="modal".
command="close" replaces data-bs-dismiss="modal".
The browser draws the backdrop as ::backdrop. Fade and slide use CSS transitions and @starting-style.
Default live dialogs use closedby="any" so backdrop click and Escape request close. closedby="none" replaces a static backdrop.
Native events on the dialog are close and cancel instead of *.bs.modal.
A <form method="dialog"> inside the dialog closes it on submit. Each submit button’s value becomes dialog.returnValue — a confirm or prompt without script. Read that property on the close event if you need it in the page.

Modal components

A static example of the modal header, body, and footer. This preview is not a dialog — use the live demo to open one.

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Modal title</h5>
      <button type="button" class="btn-close" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <p>Modal body text goes here.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div>
</div>

Live demo

<button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModal">
  Launch demo modal
</button>

<dialog class="modal" closedby="any" id="exampleModal" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Woohoo, you’re reading this text in a modal!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="exampleModal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</dialog>

Static backdrop

closedby="none" prevents closing on backdrop click and Escape. Dismiss with the close control instead.

<button type="button" class="btn btn-primary" command="show-modal" commandfor="staticBackdrop">
  Launch static backdrop modal
</button>

<dialog class="modal" closedby="none" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
        <button type="button" class="btn-close" command="close" commandfor="staticBackdrop" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        I will not close if you click outside of me. Don’t even try to press escape key.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="staticBackdrop">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</dialog>

Scrolling long content

When modals become too long for the viewport, they scroll independent of the page itself.

<button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalLong">
  Launch demo modal
</button>

<dialog class="modal" closedby="any" id="exampleModalLong" aria-labelledby="exampleModalLongTitle">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalLong" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>This is some placeholder content to show the scrolling behavior for modals. Repeated line breaks demonstrate how content can exceed the inner height of the modal.</p>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <p>This content should appear at the bottom after you scroll.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="exampleModalLong">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</dialog>

Scrollable modal body

Add .modal-dialog-scrollable to keep the header and footer visible while the body scrolls.

<button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalScrollable">
  Launch scrolling modal
</button>

<dialog class="modal" closedby="any" id="exampleModalScrollable" aria-labelledby="exampleModalScrollableTitle">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalScrollableTitle">Modal title</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalScrollable" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable. You can put any content here and it will scroll independently inside the modal body.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable. You can put any content here and it will scroll independently inside the modal body.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable. You can put any content here and it will scroll independently inside the modal body.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable. You can put any content here and it will scroll independently inside the modal body.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable. You can put any content here and it will scroll independently inside the modal body.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable. You can put any content here and it will scroll independently inside the modal body.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable. You can put any content here and it will scroll independently inside the modal body.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable. You can put any content here and it will scroll independently inside the modal body.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="exampleModalScrollable">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</dialog>

Vertically centered

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

<div class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalCenter">
    Vertically centered modal
  </button>
  <button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalCenteredScrollable">
    Vertically centered scrollable modal
  </button>
</div>

<dialog class="modal" closedby="any" id="exampleModalCenter" aria-labelledby="exampleModalCenterTitle">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalCenterTitle">Modal title</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalCenter" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>This is a vertically centered modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="exampleModalCenter">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</dialog>

<dialog class="modal" closedby="any" id="exampleModalCenteredScrollable" aria-labelledby="exampleModalCenteredScrollableTitle">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalCenteredScrollable" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable.</p>
        <p>This is some placeholder content to show a vertically centered modal that’s also scrollable.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="exampleModalCenteredScrollable">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</dialog>

Using the grid

Utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body.

<button type="button" class="btn btn-primary" command="show-modal" commandfor="gridModal">
  Launch demo modal
</button>

<dialog class="modal" closedby="any" id="gridModal" aria-labelledby="gridModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="gridModalLabel">Grids in modals</h1>
        <button type="button" class="btn-close" command="close" commandfor="gridModal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
          </div>
          <div class="row">
            <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
            <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
          </div>
          <div class="row">
            <div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              Level 1: .col-sm-9
              <div class="row">
                <div class="col-8 col-sm-6">
                  Level 2: .col-8 .col-sm-6
                </div>
                <div class="col-4 col-sm-6">
                  Level 2: .col-4 .col-sm-6
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="gridModal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</dialog>

Toggle between modals

Open another dialog with commandfor.

Bootstrap’s Modal plugin shows only one modal at a time and hides the current one when another opens. Native <dialog> elements stack instead — there is no way to auto-hide the first dialog without JavaScript.

<dialog class="modal" closedby="any" id="exampleModalToggle" aria-labelledby="exampleModalToggleLabel">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalToggle" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" command="show-modal" commandfor="exampleModalToggle2">Open second modal</button>
      </div>
    </div>
  </div>
</dialog>
<dialog class="modal" closedby="any" id="exampleModalToggle2" aria-labelledby="exampleModalToggleLabel2">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalToggle2" aria-label="Close"></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" command="show-modal" commandfor="exampleModalToggle">Back to first</button>
      </div>
    </div>
  </div>
</dialog>
<button class="btn btn-primary" command="show-modal" commandfor="exampleModalToggle">Open first modal</button>

Optional sizes

Modals have three optional sizes via modifier classes on .modal-dialog. These sizes kick in at certain breakpoints.

<div class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalXl">Extra large modal</button>
  <button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalLg">Large modal</button>
  <button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalSm">Small modal</button>
</div>

<dialog class="modal" closedby="any" id="exampleModalXl" aria-labelledby="exampleModalXlLabel">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-4" id="exampleModalXlLabel">Extra large modal</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalXl" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</dialog>
<dialog class="modal" closedby="any" id="exampleModalLg" aria-labelledby="exampleModalLgLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-4" id="exampleModalLgLabel">Large modal</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalLg" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</dialog>
<dialog class="modal" closedby="any" id="exampleModalSm" aria-labelledby="exampleModalSmLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-4" id="exampleModalSmLabel">Small modal</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalSm" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</dialog>

Fullscreen modal

Cover the viewport with modifier classes on .modal-dialog.

<div class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalFullscreen">Full screen</button>
  <button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalFullscreenSm">Full screen below sm</button>
  <button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalFullscreenMd">Full screen below md</button>
  <button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalFullscreenLg">Full screen below lg</button>
  <button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalFullscreenXl">Full screen below xl</button>
  <button type="button" class="btn btn-primary" command="show-modal" commandfor="exampleModalFullscreenXxl">Full screen below xxl</button>
</div>

<dialog class="modal" closedby="any" id="exampleModalFullscreen" aria-labelledby="exampleModalFullscreenLabel">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalFullscreen" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="exampleModalFullscreen">Close</button>
      </div>
    </div>
  </div>
</dialog>
<dialog class="modal" closedby="any" id="exampleModalFullscreenSm" aria-labelledby="exampleModalFullscreenSmLabel">
  <div class="modal-dialog modal-fullscreen-sm-down">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-4" id="exampleModalFullscreenSmLabel">Full screen below sm</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalFullscreenSm" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="exampleModalFullscreenSm">Close</button>
      </div>
    </div>
  </div>
</dialog>
<dialog class="modal" closedby="any" id="exampleModalFullscreenMd" aria-labelledby="exampleModalFullscreenMdLabel">
  <div class="modal-dialog modal-fullscreen-md-down">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-4" id="exampleModalFullscreenMdLabel">Full screen below md</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalFullscreenMd" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="exampleModalFullscreenMd">Close</button>
      </div>
    </div>
  </div>
</dialog>
<dialog class="modal" closedby="any" id="exampleModalFullscreenLg" aria-labelledby="exampleModalFullscreenLgLabel">
  <div class="modal-dialog modal-fullscreen-lg-down">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-4" id="exampleModalFullscreenLgLabel">Full screen below lg</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalFullscreenLg" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="exampleModalFullscreenLg">Close</button>
      </div>
    </div>
  </div>
</dialog>
<dialog class="modal" closedby="any" id="exampleModalFullscreenXl" aria-labelledby="exampleModalFullscreenXlLabel">
  <div class="modal-dialog modal-fullscreen-xl-down">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-4" id="exampleModalFullscreenXlLabel">Full screen below xl</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalFullscreenXl" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="exampleModalFullscreenXl">Close</button>
      </div>
    </div>
  </div>
</dialog>
<dialog class="modal" closedby="any" id="exampleModalFullscreenXxl" aria-labelledby="exampleModalFullscreenXxlLabel">
  <div class="modal-dialog modal-fullscreen-xxl-down">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1>
        <button type="button" class="btn-close" command="close" commandfor="exampleModalFullscreenXxl" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" command="close" commandfor="exampleModalFullscreenXxl">Close</button>
      </div>
    </div>
  </div>
</dialog>

Confirm with method=dialog

The form wraps the modal shell. Cancel, Delete, and the close control are submit buttons. No command=close on those controls.

<button type="button" class="btn btn-primary" command="show-modal" commandfor="dialogFormModal">
  Launch confirm
</button>

<dialog class="modal" closedby="any" id="dialogFormModal" aria-labelledby="dialogFormModalLabel">
  <form method="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="dialogFormModalLabel">Delete file?</h1>
          <button type="submit" class="btn-close" value="cancel" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Submit buttons close the dialog and set <code>returnValue</code> to their <code>value</code>.
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-secondary" value="cancel">Cancel</button>
          <button type="submit" class="btn btn-danger" value="delete">Delete</button>
        </div>
      </div>
    </div>
  </form>
</dialog>

returnValue

Open the dialog, pick a button, then read dialog.returnValue on close. This output is a docs demo — the markup above needs no script.

Last returnValue: —

Accessibility

showModal() (from command="show-modal") puts the dialog in the top layer, traps focus, and handles Escape. Name it with aria-labelledby pointing at .modal-title.

closedby="any" also closes on a backdrop click. closedby="none" keeps Escape and backdrop from closing; provide a close button.

<form method="dialog"> submit buttons close the dialog and set returnValue. Backdrop or Escape leaves that string empty.

Browser support

Three columns, not one baseline. The same row is on the overview.
No script	Polyfill	No fallback
`dialog`	`command` / `commandfor` (Chrome 135+, Firefox 144+, Safari 26.2+). `closedby` is missing in Safari.	None