Modal
How it works
Note: Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.Examples
Static example
Live demo
Static backdrop
Modal will not close when clicking outside it.
Scrolling long content
You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.
Vertically centered
Tooltips and popovers
Using the grid
Varying modal content
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-bs-* attributes.
Change animation
Modify $modal-fade-transform and $modal-show-transform variables.
Remove animation
Simply remove the .fade class from your modal markup.
Dynamic heights
If the height of a modal changes while it is open, you should call myModal.handleUpdate() to readjust the modal’s position in case a scrollbar appears.
Accessibility
Be sure to add aria-labelledby="...", referencing the modal title, to .modal. Additionally, you may give a description of your modal dialog with aria-describedby on .modal. Note that you don’t need to add role="dialog" since we already add it via JavaScript.
Embedding YouTube videos
Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post for more information.
Optional sizes
| Size | Class | Modal max-width |
|---|---|---|
| Small | .modal-sm |
300px |
| Default | None | 500px |
| Large | .modal-lg |
800px |
| Extra large | .modal-xl |
1260px |
A default modal without modifier class constitutes the “medium” size modal.
Fullscreen Modal
| Class | Availability |
|---|---|
.modal-fullscreen |
Always |
.modal-fullscreen-sm-down |
Below 576px |
.modal-fullscreen-md-down |
Below 768px |
.modal-fullscreen-lg-down |
Below 992px |
.modal-fullscreen-xl-down |
Below 1260px |
.modal-fullscreen-xxl-down |
Below 1400px |
Usage
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
Via data attributes
Activate a modal without writing JavaScript. Set data-bs-toggle="modal" on a controller element, like a button, along with a data-bs-target="#foo" or href="#foo" to target a specific modal to toggle.
Via JavaScript
Create a modal with a single line of JavaScript:
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-backdrop="".
| Name | Type | Default | Description |
|---|---|---|---|
backdrop |
boolean or the string 'static' |
true |
Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
keyboard |
boolean | true |
Closes the modal when escape key is pressed |
focus |
boolean | true |
Puts the focus on the modal when initialized. |
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
Passing options
Activates your content as a modal. Accepts an optional options object.
toggle
Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).
show
Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).
handleUpdate
Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
handleUpdate
Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
dispose
Destroys an element’s modal. (Removes stored data on the DOM element)
getInstance
Static method which allows you to get the modal instance associated with a DOM element
Events
Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).
| Event type | Description |
|---|---|
show.bs.modal |
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
shown.bs.modal |
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
hide.bs.modal |
This event is fired immediately when the hide instance method has been called. |
hidden.bs.modal |
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
hidePrevented.bs.modal |
This event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option or data-bs-keyboard set to false. |