--- title: Modal description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. toc: true --- ## How it works Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed. - 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. - Clicking on the modal “backdrop” will automatically close the modal. - Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences. - Modals use `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. - Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]([[docsref:/getting-started/browsers-devices#modals-and-dropdowns-on-mobile]]) for details. - Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript: ```js const myModal = document.getElementById('myModal') const myInput = document.getElementById('myInput') myModal.addEventListener('shown.bs.modal', () => { myInput.focus() }) ``` Keep reading for demos and usage guidelines. ## Examples ### Modal components 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.
Modal title

Modal body text goes here.

```html
Modal title

Modal body text goes here.

``` In the above static example, we use `
`, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the `.modal-title` should ideally be an `

`. If necessary, you can use the [font size utilities]([[docsref:/utilities/text#font-size]]) to control the heading’s appearance. All the following live examples use this approach. ### Live demo Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
```html ``` ### Static backdrop When backdrop is set to static, the modal will not close when clicking outside of it. Click the button below to try it.
```html ``` ### 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`.
```html
...
``` ### Vertically centered Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.