Modal
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Page Demo Bootstrap DocBasic example
Below is a static modal example (meaning its position
and display
have been overridden). Included are the modal header, modal body (required for padding
), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
<!-- Button trigger modal -->
<button class="btn btn-light" data-toggle="modal" data-target="#modal-default">Default modal</button>
<!-- Modal -->
<div class="modal fade" id="modal-default" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pull-left">Default modal</h5>
</div>
<div class="modal-body">
Curabitur blandit mollis lacus. Nulla sit amet est. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras sagittis.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link">Save changes</button>
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Modal Sizes
Modals have two optional sizes available via modifier classes.
<div class="modal fade" id="modal-large" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pull-left">Large modal</h5>
</div>
<div class="modal-body">
Curabitur blandit mollis lacus. Nulla sit amet est. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras sagittis.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link">Save changes</button>
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-large" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pull-left">Large modal</h5>
</div>
<div class="modal-body">
Curabitur blandit mollis lacus. Nulla sit amet est. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras sagittis.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link">Save changes</button>
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Other Modal examples
Add .modal-dialog-centered
to .modal-dialog
to vertically center the modal.
<div class="modal fade" id="modal-centered" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pull-left">Modal Header</h5>
</div>
<div class="modal-body">
Curabitur blandit mollis lacus. Nulla sit amet est. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras sagittis.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link">Save changes</button>
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Add attribute data-backdrop="false"
to .modal
in order to disable the backdrop of the modal.
<div class="modal fade" id="modal-no-backdrop" data-backdrop="false" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pull-left">Modal Header</h5>
</div>
<div class="modal-body">
Curabitur blandit mollis lacus. Nulla sit amet est. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras sagittis.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link">Save changes</button>
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Add attributedata-backdrop="static"
to .modal
in order to ignore clicks on backdrop which is in use to close the opened modal.
<div class="modal fade" id="modal-backdrop-ignore" data-backdrop="static" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pull-left">Modal Header</h5>
</div>
<div class="modal-body">
Curabitur blandit mollis lacus. Nulla sit amet est. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras sagittis.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link">Save changes</button>
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Add attribute
data-keyboard="false"
to .modal
in order to disable any keyboard events which attached to the opened modal such as esc
for close.
<div class="modal fade" id="modal-keyboard" data-keyboard="false" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pull-left">Modal Header</h5>
</div>
<div class="modal-body">
Curabitur blandit mollis lacus. Nulla sit amet est. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras sagittis.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link">Save changes</button>
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Simple remove the class
.fade
from .modal
to disable the default fade in down animation.
<div class="modal" id="modal-animation" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pull-left">Modal Header</h5>
</div>
<div class="modal-body">
Curabitur blandit mollis lacus. Nulla sit amet est. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras sagittis.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link">Save changes</button>
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Requirements:
/scss/inc/bootstrap-overrides/_modal.scss