Translate
Modals
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
Mobile device caveats
There are some caveats regarding using modals on mobile devices. See Twitter Bootstrap browser support docs for details.
Basic example
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
Make modals accessible
Be sure to add role="dialog" and aria-labelledby="...", referencing the modal title, to .modal, and role="document" to the .modal-dialog itself.
Additionally, you may give a description of your modal dialog with aria-describedby on .modal.
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
Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
Remove animation
For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
...
</div>