Large modal Click on image
This image has
data-toggle and data-target attributes. data-toggle="modal" tells us it is triggering a modal. data-target=".bs-example-modal-lg" tells us the name of the target modal to call.
Medium modal Click on image
Small modal Click on image
Responsive modal
Modal based on trigger button
This is a short demo but you might have the question of reusable modals: Have a bunch of buttons that all trigger the same modal with slightly different contents?
Modal basics
- Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the
<body>so that modal content scrolls instead. - Clicking on the modal “backdrop” will automatically close the modal.
- Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
- Modals use
position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a.modalwithin another fixed element. - Once again, due to
position: fixed, there are some caveats with using modals on mobile devices. See the official Bootstrap browser support docs for details. - Due to how HTML5 defines its semantics, the
autofocusHTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})Modal sizes/options
Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
modal-smmodal-lg
Vertically Centered
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Modals can use the Bootstrap grid system.