Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Content within modals can be formatted the same as non-modal content, even leveraging the grid for layout.
Examples
Static Example
Functional Examples
Usage
Rules
- Modals are for opening content within context, or providing additional interstitial content or instructions
- Only one modal can be open at a time
- 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
Constraints
- Modals overlay content below
- Modals will long content scroll independent of the page
- Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post(external link).
- To take advantage of the Bootstrap grid system within a modal, just nest
.container-fluid
within the.modal-body
and then use the normal grid system classes within this container - There are some caveats regarding using modals on mobile devices. See Bootstrap’s browser support docs for details(external link).
Principles
- Modals provide contextual focus for information or tasks
Accessibility
- Be sure to add
role="dialog"
andaria-labelledby="..."
, referencing the modal title, to.modal
, androle="document"
to the.modal-dialog
itself - You may give a description of your modal dialog with
aria-describedby
on.modal
- Modals should create a temporary keyboard trap so that a keyboard user cannot tab to content blocked by the modal
Class Names
modal Required |
Used on the parent modal container |
fade Modifier |
Used on the parent modal container to fade in the modal |
modal-sm Modifier |
Used to generate a smaller modal, placed on the |
modal-lg Modifier |
Used to generate a larger modal, placed on the |
modal-full Modifier |
Used to generate a full viewport modal, placed on the |
modal-header-inverse Modifier |
Add to |
Configuration
data-toggle="modal" Required |
Used on the modal trigger |
data-target Required |
References the ID (or class if unique) of the modal container, e.g. |
- Last updated April 3, 2018
- Authorable - Yes
- Core - Modals