--- title: Modal summary: 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. description: Create modal dialogs for notifications, confirmations, and custom content. Adjust sizes, add forms, and control them with JavaScript. related: [/ui/components/offcanvas, /ui/components/toast] source: core/scss/ui/_modals.scss css-vars: modal classnames: component: - class: modal desc: Container element, hidden until Bootstrap opens it part: - class: modal-dialog desc: Positions and sizes the dialog inside the container - class: modal-content desc: The visible panel - class: modal-header desc: Title bar, usually with the close button - class: modal-title desc: Heading inside the header - class: modal-body desc: Content area - class: modal-footer desc: Row of actions at the bottom - class: modal-status desc: Colored bar across the top edge, tinted with a bg-{color} utility style: - class: modal-blur desc: Blurs the page behind the dialog instead of only dimming it modifier: - class: modal-dialog-centered desc: Centers the dialog vertically - class: modal-dialog-scrollable desc: Scrolls the body instead of the whole page - class: modal-full-width desc: Lets the dialog use the full viewport width - class: modal-fullscreen desc: Fills the viewport; modal-fullscreen-{breakpoint}-down only below that width size: - class: modal-sm desc: Small dialog - class: modal-lg desc: Large dialog - class: modal-xl desc: Extra large dialog --- import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro'; Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `` 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. ```html ``` ## Prompt and alert A modal also works as a prompt or an alert: a short message with one or two buttons. ## Modal with form A form inside a modal keeps the user on the page. Put the fields in the body and the submit button in the footer. ## Blurred backdrop Add `modal-blur` next to `modal` to blur the page behind the dialog instead of only dimming it. ```html ``` ## 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`. ```html ``` ## 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.

Modal title

Are you sure?

Payment succeeded

New report

Full width modal