Modals
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Modal on BootstrapExample
<div class="modal fade" id="error-modal" tabindex="-1" role="dialog" aria-hidden="true"></div>
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 500px">
<div class="modal-content position-relative">
<div class="position-absolute top-0 right-0 mt-2 mr-2 z-index-1"><button class="btn-close btn btn-sm btn-circle d-flex flex-center transition-base" data-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body p-0">
<p>The Modal plugin is a dialog box/popup window that is displayed on top of the current page </p>
</div>
<div class="modal-footer"><button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button><button class="btn btn-primary" type="button">Understood </button></div>
</div>
</div>
Static backdrop
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
<div class="modal fade" id="staticBackdropLabelExample" data-keyboard="false" data-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabelExample" aria-hidden="true">
<div class="modal-dialog modal-lg mt-6" role="document">
<div class="modal-content border-0">
<div class="position-absolute top-0 right-0 mt-3 mr-3 z-index-1"><button class="btn-close btn btn-sm btn-circle d-flex flex-center transition-base" data-dismiss="modal" aria-label="Close"></button></div>
</div>
</div>
</div>
Tooltips and popovers
Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
<div class="row">
<div class="col">
<h5>Popover in a modal</h5>
<p>This <a class="btn btn-secondary popover-test" href="#" role="button" title="Popover title" data-toggle="popover" data-placement="top" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<h5>Tooltips in a modal</h5>
<p><a class="tooltip-test" href="#" data-toggle="tooltip" data-placement="top" title="Tooltip" data="data">This link</a> and <a class="tooltip-test" href="#" data-toggle="tooltip" data-placement="top" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
</div>
Scrolling long content
When modals become too long for the userβs viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
<div class="modal fade" id="scrollinglongcontent" data-keyboard="false" tabindex="-1" aria-labelledby="scrollinglongcontentLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="scrollinglongcontentLabel">Modal title</h5><button class="btn-close" type="button" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body modal-dialog modal-dialog-scrollable mt-0">
<p>Cras mattis consectetur purus sit amet fermentum....</p>
</div>
</div>
</div>
</div>