Skip to main content
King County logo

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>