Modals

Live Demo Modal


<!-- Button trigger modal -->
<button type="button" class="btn btn btn-primary py-2 px-4 text-white fw-semibold" 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">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hello Modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary text-white">Save changes</button>
</div>
</div>
</div>
</div>

Static Backdrop Modal


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary text-white py-2 px-4 fw-semibold" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>

<!-- Modal -->
<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">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hello Modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary text-white">Understood</button>
</div>
</div>
</div>
</div>

Scrolling long content modal


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary text-white py-2 px-4 fw-semibold" data-bs-toggle="modal" data-bs-target="#staticBackdrop3">
Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop3" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdrop3Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdrop3Label">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hello Modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary text-white">Understood</button>
</div>
</div>
</div>
</div>

Vertically centered Modal


<button type="button" class="btn btn btn-primary py-2 px-4 text-white fw-semibold" data-bs-toggle="modal" data-bs-target="#exampleModal4">
Center demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal4" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hello Modal Center
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary text-white">Save changes</button>
</div>
</div>
</div>
</div>

Extra large modal


<!-- Button trigger modal -->
<button type="button" class="btn btn btn-primary py-2 px-4 text-white fw-semibold" data-bs-toggle="modal" data-bs-target="#exampleModalxl">
Center demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalxl" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hello Modal Center
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary text-white">Save changes</button>
</div>
</div>
</div>
</div>

Large modal


<!-- Button trigger modal -->
<button type="button" class="btn btn btn-primary py-2 px-4 text-white fw-semibold" data-bs-toggle="modal" data-bs-target="#exampleModallg">
Large modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModallg" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Large modal</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hello Modal Center
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary text-white">Save changes</button>
</div>
</div>
</div>
</div>

Checkboxes and radios List


<!-- Button trigger modal -->
<button type="button" class="btn btn btn-primary py-2 px-4 text-white fw-semibold" data-bs-toggle="modal" data-bs-target="#exampleModalsm">
Small modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalsm" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Small modal</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hello Modal Center
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary text-white">Save changes</button>
</div>
</div>
</div>
</div>