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" and aria-labelledby="...", referencing the modal title, to .modal, and role="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-dialog

modal-lg
Modifier

Used to generate a larger modal, placed on the modal-dialog

modal-full
Modifier

Used to generate a full viewport modal, placed on the modal-dialog

modal-header-inverse
Modifier

Add to .modal-header to inverse the modal header and title

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. data-target="IDReference"


  • Last updated April 3, 2018
  • Authorable - Yes
  • Core - Modals