<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="exampleModalLabel">Modal title</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#staticBackdropModal"
>
Launch demo modal
</button>
<!-- Modal -->
<div
class="modal fade"
id="staticBackdropModal"
tabindex="-1"
data-bs-backdrop="static"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h2>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalScrollModal"
>
Launch demo modal
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModalScrollModal"
tabindex="-1"
aria-labelledby="exampleModalScrollModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="exampleModalScrollModalLabel">Modal title</h2>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body" style="min-height: 1500px">
<p>
This is some placeholder content to show the scrolling behavior for modals.
Instead of repeating the text in the modal, we use an inline style to set a
minimum height, thereby extending the length of the overall modal and
demonstrating the overflow scrolling. When content becomes longer than the height
of the viewport, scrolling will move the modal as needed.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalScrollBody"
>
Launch demo modal
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModalScrollBody"
tabindex="-1"
aria-labelledby="exampleModalScrollBodyLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="exampleModalScrollBodyLabel">Modal title</h2>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>
This is some placeholder content to show the scrolling behavior for modals. Instead
of repeating the text in the modal, we use an inline style to set a minimum height,
thereby extending the length of the overall modal and demonstrating the overflow
scrolling. When content becomes longer than the height of the viewport, scrolling
will move the modal as needed.
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModaltooltipPopovers"
>
Launch demo modal
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModaltooltipPopovers"
tabindex="-1"
aria-labelledby="exampleModaltooltipPopoversLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="exampleModaltooltipPopoversLabel">Modal title</h2>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<h2 class="fs-5">Popover in a modal</h2>
<p>
This
<button
class="btn btn-secondary"
data-bs-toggle="popover"
title="Popover title"
data-bs-content="Popover body content is set in this attribute."
>
button
</button>
triggers a popover on click.
</p>
<hr />
<h2 class="fs-5">Tooltips in a modal</h2>
<p>
<a href="#"
data-bs-toggle="tooltip" title="Tooltip">This link</a> and
<a href="#"
data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on
hover.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><div class="d-flex gap-2">
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalXl"
>
Extra large modal
</button>
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalLg"
>
Large modal
</button>
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalSm"
>
Small modal
</button>
<div
class="modal fade"
id="exampleModalXl"
tabindex="-1"
aria-labelledby="exampleModalXlLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-4" id="exampleModalXlLabel">Extra large modal</h2>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">...</div>
</div>
</div>
</div>
<div
class="modal fade"
id="exampleModalLg"
tabindex="-1"
aria-labelledby="exampleModalLgLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-4" id="exampleModalLgLabel">Extra large modal</h2>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">...</div>
</div>
</div>
</div>
<div
class="modal fade"
id="exampleModalSm"
tabindex="-1"
aria-labelledby="exampleModalSmLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-4" id="exampleModalSmLabel">Extra large modal</h2>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">...</div>
</div>
</div>
</div>
</div>