Modal
- Home
- Modal
Default Modal
<button type="button" class="butn border-0" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- default 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">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<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>
Static Backdrop
<button type="button" class="butn border-0" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- static 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">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<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">Understood</button>
</div>
</div>
</div>
</div>
Scrolling Long Content
<button type="button" class="butn border-0" data-bs-toggle="modal" data-bs-target="#scrollable">
Launch demo modal
</button>
<!-- Scrollable modal -->
<div class="modal fade" id="scrollable" tabindex="-1" aria-labelledby="scrollableLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="scrollable">Modal title</h5>
<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>
Vertically Centered
<button type="button" class="butn border-0" data-bs-toggle="modal" data-bs-target="#centered">
Launch demo modal
</button>
<!-- Vertically centered -->
<div class="modal fade" id="centered" tabindex="-1" aria-labelledby="centeredLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="centeredLabel">Modal title</h5>
<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>
Using The Grid
<button type="button" class="butn border-0" data-bs-toggle="modal" data-bs-target="#grid">
Launch demo modal
</button>
<!-- Using the grid -->
<div class="modal fade" id="grid" tabindex="-1" aria-labelledby="gridLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="gridLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row mb-4">
<div class="col-md-4 border bg-light">.col-md-4</div>
<div class="col-md-4 ms-auto border bg-light">.col-md-4 .ms-auto</div>
</div>
<div class="row mb-4">
<div class="col-md-3 ms-auto border bg-light">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto border bg-light">.col-md-2 .ms-auto</div>
</div>
<div class="row mb-4">
<div class="col-md-6 ms-auto border bg-light">.col-md-6 .ms-auto</div>
</div>
<div class="row">
<div class="col-sm-9 border bg-light">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6 border bg-light">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6 border bg-light">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</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>
