Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.
<body>
so that modal content scrolls instead.position: fixed
, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal
within another fixed element.position: fixed
, there are some caveats with using modals on mobile devices. See our browser support docs for details.autofocus
HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
Below is a static modal example (meaning its position
and display
have been overridden). Included are the modal header, modal body (required for padding
), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
Add .modal-dialog-centered
to .modal-dialog
to vertically center the modal.
Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog
. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
Size | Class | Modal max-width |
---|---|---|
Small | .modal-sm |
300px |
Default | None | 500px |
Large | .modal-lg |
800px |
Extra large | .modal-xl |
1140px |
Fullscreen | .modal-fullscreen |
Always |