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.
Make modals accessible
Be sure to add
aria-labelledby="...", referencing the modal title, to
role="document" to the
Additionally, you may give a description of your modal dialog with
Embedding YouTube videos
Modals have two optional sizes, available via modifier classes to be placed on a
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>