Modal
Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Bootstrap Modal documentationExample
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<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">
<h3 class="modal-title" id="exampleModalLabel">Modal title</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Woo-hoo, you're reading this text in a modal!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Static backdrop
When backdrop is set to static, the modal will not close when clicking outside of it. Click the button below to try it.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="staticBackdropLabel">Modal title</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>I will not close if you click outside of me. Don't even try to press escape key.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</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.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">
Launch demo modal
</button>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">Modal title</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat mi sit amet vehicula tincidunt. Nam varius arcu ut nisl lobortis, vel pharetra elit euismod. Aenean sed facilisis nisl. Duis egestas aliquam fermentum. Ut vulputate ultricies lorem ac egestas. Mauris vel massa erat. Aliquam auctor gravida leo, ut ultricies lorem vulputate et. Praesent fermentum ex at ullamcorper pretium. Nam vitae tortor interdum, tempor erat eget, pulvinar massa. Vestibulum lectus nisl, venenatis ac risus quis, aliquam fermentum ipsum. Nam non tincidunt diam. Duis a imperdiet nisl.</p>
<p>Proin sit amet augue consectetur, elementum metus non, tempor eros. Pellentesque ut neque non mauris euismod tincidunt quis in nunc. Donec massa dolor, interdum id nisl rhoncus, cursus facilisis erat. Suspendisse in orci non felis elementum auctor at at nunc. Maecenas gravida odio non tortor bibendum, et interdum orci maximus. Vivamus lacus ex, consectetur et aliquet sollicitudin, convallis nec urna. Suspendisse mollis mi sit amet nisi aliquet viverra. Maecenas elementum, erat ornare posuere iaculis, arcu tellus cursus justo, in porta leo felis sed neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacus felis, mattis non vestibulum a, volutpat vitae leo. Fusce faucibus feugiat lacus, id lobortis tellus. Praesent erat nulla, pharetra eu sapien sed, laoreet faucibus orci. Fusce egestas odio eu neque feugiat faucibus. Quisque semper lorem mi. Donec dapibus arcu est, vel scelerisque lacus scelerisque eu.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi id magna eleifend, eleifend massa hendrerit, vestibulum sapien. Duis tincidunt venenatis est, vel varius est efficitur in. Phasellus lobortis nisl eros, quis rutrum nibh vestibulum ultricies. Aenean porta in odio eget accumsan. Nullam laoreet nibh ex. Nullam id libero elit. Nunc porttitor consectetur lectus. Curabitur diam leo, pulvinar sed congue quis, ornare vitae velit. Nullam nec laoreet orci. Etiam ultricies dictum pretium. Duis luctus semper erat ut pretium. Mauris commodo libero vitae auctor egestas. Proin a turpis vel ante vulputate aliquam.</p>
<p>Donec luctus ultrices ligula et efficitur. Nulla convallis consequat nunc, ac vulputate leo egestas maximus. Sed pretium ut justo non finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras egestas, ex eu malesuada viverra, urna magna vehicula dui, quis pellentesque elit ex sed felis. Pellentesque dignissim sollicitudin est, vel tempus nulla ornare et.</p>
<p>Vivamus ullamcorper nibh eget dignissim rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eu tristique arcu. Curabitur faucibus eu metus a semper. Nulla sit amet sagittis massa. Duis eleifend, sapien at blandit volutpat, diam eros sollicitudin mi, eget egestas dui odio a risus. Aliquam vitae dolor id lacus tristique commodo vitae eget felis.</p>
<p>Etiam sodales enim eu dolor scelerisque, ut sollicitudin leo aliquet. Nulla facilisi. Fusce ac diam eget turpis vehicula cursus in tincidunt lorem. Vestibulum venenatis lacus tellus, id facilisis dolor facilisis et. Nam vitae varius ipsum. Mauris a lectus fermentum, posuere tortor eu, pellentesque mi. Fusce a elit tincidunt, venenatis dui et, mollis ligula. Donec hendrerit mi in metus efficitur, vitae lobortis felis faucibus.</p>
<p>Maecenas rutrum libero id dui dignissim tincidunt. Nulla maximus ullamcorper convallis. Sed eget diam non nisi fringilla fringilla. Curabitur dictum sed diam nec eleifend. Sed massa dolor, auctor id felis vitae, ullamcorper lacinia ipsum. Nam finibus lacus et tellus sagittis semper. Duis aliquet sollicitudin diam, ac venenatis libero condimentum non. Cras sed purus vitae purus tempus feugiat et et orci. Fusce non ullamcorper purus. Proin vitae viverra velit. In at interdum elit.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer sed felis augue. Etiam eget purus efficitur, vulputate mauris ac, vestibulum massa. Duis et dolor id mauris egestas porta id sit amet sapien. Cras sagittis et dolor sit amet pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In ac lorem nisl. Pellentesque nec finibus orci, volutpat sodales tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget euismod purus, sed sagittis nibh. Fusce quis ex sollicitudin urna accumsan tempor. Praesent lacinia vulputate massa at dapibus. In et facilisis ex. Curabitur dui est, tempus a lacus eu, bibendum ornare eros. Duis convallis mauris diam, vitae venenatis leo congue at. Aenean leo nisi, sollicitudin non viverra eu, pretium vel ex.</p>
<p>Curabitur suscipit justo a metus ultrices, quis gravida erat dictum. Nulla et leo nibh. Cras eu lacus augue. Vestibulum vitae dolor eget magna dapibus volutpat sed vel purus. Ut interdum finibus arcu, rutrum sollicitudin dolor hendrerit id. Morbi lobortis risus sapien, a egestas magna scelerisque sed. Cras sagittis justo mauris, id vestibulum lectus ullamcorper sit amet. Donec id eros orci. In at odio rutrum, convallis augue eu, tincidunt mi. Suspendisse nec bibendum felis, ut aliquam arcu. Sed placerat bibendum dui a mollis. Quisque in rhoncus lacus.</p>
<p>Donec tristique nec turpis ut aliquam. Etiam vitae leo turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vel pellentesque orci, quis euismod velit. Donec interdum imperdiet rutrum. Donec sollicitudin sit amet nunc id ullamcorper. Nulla efficitur turpis imperdiet condimentum pellentesque. Etiam quis mauris sit amet nulla molestie porta. Aliquam faucibus consequat egestas. Phasellus a bibendum elit. Maecenas tincidunt tempus nisl et efficitur. Nullam eget blandit nunc. Fusce ornare elit leo, quis auctor quam pulvinar.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">
Launch demo modal
</button>
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalScrollableTitle">Modal title</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat mi sit amet vehicula tincidunt. Nam varius arcu ut nisl lobortis, vel pharetra elit euismod. Aenean sed facilisis nisl. Duis egestas aliquam fermentum. Ut vulputate ultricies lorem ac egestas. Mauris vel massa erat. Aliquam auctor gravida leo, ut ultricies lorem vulputate et. Praesent fermentum ex at ullamcorper pretium. Nam vitae tortor interdum, tempor erat eget, pulvinar massa. Vestibulum lectus nisl, venenatis ac risus quis, aliquam fermentum ipsum. Nam non tincidunt diam. Duis a imperdiet nisl.</p>
<p>Proin sit amet augue consectetur, elementum metus non, tempor eros. Pellentesque ut neque non mauris euismod tincidunt quis in nunc. Donec massa dolor, interdum id nisl rhoncus, cursus facilisis erat. Suspendisse in orci non felis elementum auctor at at nunc. Maecenas gravida odio non tortor bibendum, et interdum orci maximus. Vivamus lacus ex, consectetur et aliquet sollicitudin, convallis nec urna. Suspendisse mollis mi sit amet nisi aliquet viverra. Maecenas elementum, erat ornare posuere iaculis, arcu tellus cursus justo, in porta leo felis sed neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacus felis, mattis non vestibulum a, volutpat vitae leo. Fusce faucibus feugiat lacus, id lobortis tellus. Praesent erat nulla, pharetra eu sapien sed, laoreet faucibus orci. Fusce egestas odio eu neque feugiat faucibus. Quisque semper lorem mi. Donec dapibus arcu est, vel scelerisque lacus scelerisque eu.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi id magna eleifend, eleifend massa hendrerit, vestibulum sapien. Duis tincidunt venenatis est, vel varius est efficitur in. Phasellus lobortis nisl eros, quis rutrum nibh vestibulum ultricies. Aenean porta in odio eget accumsan. Nullam laoreet nibh ex. Nullam id libero elit. Nunc porttitor consectetur lectus. Curabitur diam leo, pulvinar sed congue quis, ornare vitae velit. Nullam nec laoreet orci. Etiam ultricies dictum pretium. Duis luctus semper erat ut pretium. Mauris commodo libero vitae auctor egestas. Proin a turpis vel ante vulputate aliquam.</p>
<p>Donec luctus ultrices ligula et efficitur. Nulla convallis consequat nunc, ac vulputate leo egestas maximus. Sed pretium ut justo non finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras egestas, ex eu malesuada viverra, urna magna vehicula dui, quis pellentesque elit ex sed felis. Pellentesque dignissim sollicitudin est, vel tempus nulla ornare et.</p>
<p>Vivamus ullamcorper nibh eget dignissim rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eu tristique arcu. Curabitur faucibus eu metus a semper. Nulla sit amet sagittis massa. Duis eleifend, sapien at blandit volutpat, diam eros sollicitudin mi, eget egestas dui odio a risus. Aliquam vitae dolor id lacus tristique commodo vitae eget felis.</p>
<p>Etiam sodales enim eu dolor scelerisque, ut sollicitudin leo aliquet. Nulla facilisi. Fusce ac diam eget turpis vehicula cursus in tincidunt lorem. Vestibulum venenatis lacus tellus, id facilisis dolor facilisis et. Nam vitae varius ipsum. Mauris a lectus fermentum, posuere tortor eu, pellentesque mi. Fusce a elit tincidunt, venenatis dui et, mollis ligula. Donec hendrerit mi in metus efficitur, vitae lobortis felis faucibus.</p>
<p>Maecenas rutrum libero id dui dignissim tincidunt. Nulla maximus ullamcorper convallis. Sed eget diam non nisi fringilla fringilla. Curabitur dictum sed diam nec eleifend. Sed massa dolor, auctor id felis vitae, ullamcorper lacinia ipsum. Nam finibus lacus et tellus sagittis semper. Duis aliquet sollicitudin diam, ac venenatis libero condimentum non. Cras sed purus vitae purus tempus feugiat et et orci. Fusce non ullamcorper purus. Proin vitae viverra velit. In at interdum elit.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer sed felis augue. Etiam eget purus efficitur, vulputate mauris ac, vestibulum massa. Duis et dolor id mauris egestas porta id sit amet sapien. Cras sagittis et dolor sit amet pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In ac lorem nisl. Pellentesque nec finibus orci, volutpat sodales tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget euismod purus, sed sagittis nibh. Fusce quis ex sollicitudin urna accumsan tempor. Praesent lacinia vulputate massa at dapibus. In et facilisis ex. Curabitur dui est, tempus a lacus eu, bibendum ornare eros. Duis convallis mauris diam, vitae venenatis leo congue at. Aenean leo nisi, sollicitudin non viverra eu, pretium vel ex.</p>
<p>Curabitur suscipit justo a metus ultrices, quis gravida erat dictum. Nulla et leo nibh. Cras eu lacus augue. Vestibulum vitae dolor eget magna dapibus volutpat sed vel purus. Ut interdum finibus arcu, rutrum sollicitudin dolor hendrerit id. Morbi lobortis risus sapien, a egestas magna scelerisque sed. Cras sagittis justo mauris, id vestibulum lectus ullamcorper sit amet. Donec id eros orci. In at odio rutrum, convallis augue eu, tincidunt mi. Suspendisse nec bibendum felis, ut aliquam arcu. Sed placerat bibendum dui a mollis. Quisque in rhoncus lacus.</p>
<p>Donec tristique nec turpis ut aliquam. Etiam vitae leo turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vel pellentesque orci, quis euismod velit. Donec interdum imperdiet rutrum. Donec sollicitudin sit amet nunc id ullamcorper. Nulla efficitur turpis imperdiet condimentum pellentesque. Etiam quis mauris sit amet nulla molestie porta. Aliquam faucibus consequat egestas. Phasellus a bibendum elit. Maecenas tincidunt tempus nisl et efficitur. Nullam eget blandit nunc. Fusce ornare elit leo, quis auctor quam pulvinar.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Vertically centered
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
Vertically centered modal
</button>
<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalCenterTitle">Modal title</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This is a vertically centered modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
Vertically centered scrollable modal
</button>
<div id="exampleModalCenteredScrollable" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h3>
<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 a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
<br><br><br><br><br><br><br><br><br><br>
<p>Just like that.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Optional sizes
Modals have three 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.
| Size | Class | Modal max-width |
|---|---|---|
| Small | .modal-sm |
300px |
| Default | None | 500px |
| Large | .modal-lg |
800px |
| Extra large | .modal-xl |
1140px |
Our default modal without modifier class constitutes the "medium" size modal.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-xl">Extra large modal</button>
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title h4" id="myExtraLargeModalLabel">Extra large modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title h4" id="myLargeModalLabel">Large modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-sm">Small modal</button>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title h4" id="mySmallModalLabel">Small modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>Fullscreen Modal
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.
| Class | Availability |
|---|---|
.modal-fullscreen |
Always |
.modal-fullscreen-sm-down |
576px |
.modal-fullscreen-md-down |
768px |
.modal-fullscreen-lg-down |
992px |
.modal-fullscreen-xl-down |
1200px |
.modal-fullscreen-xxl-down |
1400px |
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
<div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h3>
<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>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenSm">Full screen below sm</button>
<div class="modal fade" id="exampleModalFullscreenSm" tabindex="-1" aria-labelledby="exampleModalFullscreenSmLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full screen below sm</h3>
<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>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">Full screen below md</button>
<div class="modal fade" id="exampleModalFullscreenMd" tabindex="-1" aria-labelledby="exampleModalFullscreenMdLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full screen below md</h3>
<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>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
<div class="modal fade" id="exampleModalFullscreenLg" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full screen below lg</h3>
<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>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXl">Full screen below xl</button>
<div class="modal fade" id="exampleModalFullscreenXl" tabindex="-1" aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-xl-down">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full screen below xl</h3>
<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>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">Full screen below xxl</button>
<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-xxl-down">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title h4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h3>
<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>
</div>
</div>
</div>
</div>