Modal dialogs
Modal dialog is a small window that communicates information to
the user and prompt them for a response. Dialog boxes are
classified as
"modal" or "modeless",
depending on whether or not they block interaction with the page
that initiated the dialog. Table below contains basic modal
dialog examples. Click Launch button to run modal
examples.
| Basic modals | ||
|---|---|---|
| Default modal dialog |
Basic modal dialog with header,
body and footer areas. Default
examples displays: header - contains a title and a close
button; footer - contains buttons and body contains
static or dynamic content
|
|
| Modal with icons | Modal with icons added to the specified elements: heading title, footer control buttons and text inside modal body | |
| Disable backdrop |
Disable backdrop element using
data-bs-backdrop="false" or alternatively,
specify static for a backdrop which doesn't
close the modal on click
|
|
| Disable keyboard interaction |
Disabled keyboard interaction. If
data-bs-keyboard option is set to
false, the modal can't be closed when
escape key is pressed. Make sure
data-bs-backdrop is also set to
static
|
|
| Disable animation |
Disabled animation. For modals that simply appear rather
than fade in to view, remove the
.fade class from your modal container
|
|
| Scrollable modal |
Scrollable modal that allows scroll the modal body by
adding .modal-dialog-scrollable to
.modal-dialog container
|
|
| Vertically centered |
By default, all modals are displayed in the upper part
of the screen with some distance from the top edge. You
can center the modal on the screen by adding
.modal-dialog-centered to dialog container
|
|
| Remote source |
Default Bootstrap's remote source option replacement
using a few lines of vanilla JS and
onShow event
|
|
| Modal sizing | ||
| Mini size |
Modal in mini size. Mini modal width is
300px. To use, add
modal-xs class to
.modal-dialog container
|
|
| Small size |
Modal in small size. Small modal width is
400px. To use, add
modal-sm class to
.modal-dialog container
|
|
| Default size |
Modal in default size. Default modal width is
600px. Since this is a default size, modal
markup doesn't require any additional sizing classes
|
|
| Large size |
Modal in large size. Large modal width is
900px. To use, add
modal-lg class to
.modal-dialog container
|
|
| Extra large size |
Modal in extra large size. Extra large modal width is
1140px. To use, add
modal-xl class to
.modal-dialog container
|
|
| Full size |
Modal in full width size. This modal has
94% width of the window. To use, add
modal-full class to
.modal-dialog container
|
|
| Optional modal colors | ||
| Default modal theme |
Default color theme. All areas of this modal dialog have
white background color. Doesn't require any
additional contextual classes
|
|
| Primary modal header |
Primary modal. To use, add
.bg-primary.text-white class to the
.modal-header container and
.btn-close-white to
close button in modal header
|
|
| Danger modal header |
Danger modal. To use, add
.bg-danger.text-white class to the
.modal-header container and
.btn-close-white to
close button in modal header
|
|
| Success modal header |
Success modal. To use, add
.bg-success.text-white class to the
.modal-header container and
.btn-close-white to
close button in modal header
|
|
| Warning modal header |
Warning modal. To use, add
.bg-warning.text-white class to the
.modal-header container and
.btn-close-white to
close button in modal header
|
|
| Info modal header |
Info modal. To use, add
.bg-info.text-white class to the
.modal-header container and
.btn-close-white to
close button in modal header
|
|
| Custom modal header color |
Modal with custom color added to the modal
header. To use, add any
color class from the
color system to the .modal-header container
and .btn-close-white to
close button in modal header
|
|
| Custom modal background color |
Modal dialog with solid custom background
color. To use, add any
color class from the
color system to the
.modal-content container. Additionaly, you
can also add a custom background color to the modal
header
|
|
| Form components | ||
| Vertical form |
Modal with default vertical form layout and responsive
grid. Forms must be placed outside of
.modal-body container to prevent extra
horizontal padding
|
|
| Horizontal form | Modal with horizontal form layout. It does also support responsive grid, but in this case it will look best in wider modals | |
| Inline form |
Modal with with a simple inline form layout
|
|
| Heading options | ||
| Modal with H1 heading |
Modal title in H1 size. In all heading
sizes, vertical position of a close button
will be automatically adjusted to the middle of the
modal header
|
|
| Modal with H2 heading | Modal title in H2 size |
|
| Modal with H3 heading | Modal title in H3 size |
|
| Modal with H4 heading | Modal title in H4 size |
|
| Modal with H5 heading | Modal title in H5 size |
|
| Modal with H6 heading | Modal title in H6 size |
|
| Modal with basic title |
Modal title could be either a standard heading or any
other component, but make sure you have included
.modal-title class to it
|
|
| Modal with subtitle |
Modal title subtitle. This can be either
inline or block. You can also use regular
<div> or <span> element
outside the heading, or <small> inside
heading
|
|
| Modal events | ||
| onShow event |
This event fires immediately when the
show instance method is called. If caused
by a click, the clicked element is available as the
relatedTarget property of the event
|
|
| onShown event |
This event is fired when the modal has been made visible
to the user (will wait for CSS transitions to complete).
If caused by a click, the clicked element is available
as the relatedTarget property of the event
|
|
| onHide event |
This event is fired immediately when the
hide instance method has been called
|
|
| onHidden event | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete) | |
| Programmatic dialog boxes | ||
| Alert dialog |
Example of an alert dialog replacement with
default Bootstrap modals
|
|
| Confirm dialog |
Example of a confirmation dialog
replacement with default Bootstrap modals including
callback
|
|
| Prompt dialog |
Example of a prompt dialog replacement with
default Bootstrap modals including callback
|
|
| Prompt with default value |
Example of a prompt dialog replacement with
default value
|
|
| Custom bootbox dialog | Example of a custom bootbox dialog with multiple buttons and callbacks | |
| Dialog with form | Example of a custom bootbox dialog with simple form and callbacks | |
