Modals
Default Modals
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.
<!-- default-modal -->
<a href="#x" class="btn btn-info mb-5 mr-10" data-bs-toggle="modal" data-bs-target=".default-modal">Default</a>
<!-- modal -->
<div class="modal fade default-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Default Modal</h5>
</div><!-- / modal-header -->
<div class="modal-body">
<p>..,</p>
</div><!-- / modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi-x-lg va-middle mr-5"></i> <span>Close</span></button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal"><i class="bi-check2 fs-18 va-middle mr-5"></i> <span>Save</span></button>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / default-modal -->
<!-- small-modal -->
<a href="#x" class="btn btn-warning mb-5 mr-10" data-bs-toggle="modal" data-bs-target=".small-modal">Small</a>
<!-- modal -->
<div class="modal fade small-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content text-center">
<div class="modal-header">
<h5 class="modal-title text-center w-100">Small Modal</h5>
</div><!-- / modal-header -->
<div class="modal-body">
<p>...</p>
</div><!-- / modal-body -->
<div class="modal-footer">
<p class="text-center w-100 mb-0">
<button type="button" class="btn btn-sm btn-icon btn-circle btn-danger m-x-5" data-bs-dismiss="modal"><i class="bi-x fs-18"></i></button>
<button type="button" class="btn btn-sm btn-icon btn-circle btn-success m-x-5" data-bs-dismiss="modal"><i class="bi-check fs-18"></i></button>
</p>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / small-modal -->
<!-- large-modal -->
<a href="#x" class="btn btn-danger mb-5 mr-10" data-bs-toggle="modal" data-bs-target=".large-modal">Large</a>
<!-- modal -->
<div class="modal fade large-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large Modal</h5>
</div><!-- / modal-header -->
<div class="modal-body">
<div class="container full-width">
<p>...</p>
<button type="button" class="btn btn-danger d-block w-100" data-bs-dismiss="modal">Close</button>
</div><!-- / container -->
</div><!-- / modal-body -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / large-modal -->
<!-- scrollable modal -->
<a href="#x" class="btn btn-success mb-5 mr-10" data-bs-toggle="modal" data-bs-target=".scrollable-modal">Scrollable</a>
<!-- modal -->
<div class="modal fade scrollable-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Scrollable Modal</h5>
</div><!-- / modal-header -->
<div class="modal-body">
<p>...</p>
</div><!-- / modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi-x-lg va-middle mr-5"></i> <span>Close</span></button>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / scrollable-modal -->
Custom Modals
We've created some custom modals, see the examples below:
<!-- login-modal -->
<a href="#x" class="btn btn-danger mb-10 mr-10" data-bs-toggle="modal" data-bs-target=".login-modal"><i class="bi-person-circle mr-5"></i> <span>Login</span></a>
<!-- modal -->
<div class="modal fade login-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center">
<div class="modal-header pt-40">
<h6 class="modal-title text-center w-100"><i class="bi-person-circle fs-80"></i> <span class="hidden">User</span></h6>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div><!-- / modal-header -->
<div class="modal-body pt-40 pb-30">
<form class="needs-validation" id="modal-login" novalidate="novalidate">
<input class="form-control mb-15" type="text" id="um-input" placeholder="Username or Email" required="">
<input class="form-control mb-15" type="password" id="password-input" placeholder="Password" required="">
<button type="submit" class="btn btn-primary d-block w-100"><i class="bi-unlock mr-5"></i> <span class="fs-14">Sign In</span></button>
</form>
</div><!-- / modal-body -->
<div class="modal-footer pb-40">
<p class="text-center w-100 fs-14 mb-0">Lost your password? <a href="#x" class="link-underline">Click Here</a></p>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / login-modal -->
<!-- register-modal -->
<a href="#x" class="btn btn-success mb-10 mr-10" data-bs-toggle="modal" data-bs-target=".register-modal"><i class="bi-person-plus mr-5"></i> <span>Register</span></a>
<!-- modal -->
<div class="modal fade register-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center">
<div class="modal-header pt-40">
<h6 class="modal-title text-center w-100"><i class="bi-person-plus fs-80"></i> <span class="hidden">User</span></h6>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div><!-- / modal-header -->
<div class="modal-body pt-40 pb-30">
<form class="needs-validation" id="modal-register" novalidate="novalidate">
<input class="form-control mb-15" type="text" id="register-um-input" placeholder="Email Address" required="">
<input class="form-control mb-15" type="password" id="register-pass-input" placeholder="Password" required="">
<input class="form-control mb-15" type="password" id="register-cpass-input" placeholder="Confirm Password" required="">
<button type="submit" class="btn btn-primary d-block w-100"><i class="bi-person-plus mr-5"></i> <span class="fs-14">Register</span></button>
</form>
</div><!-- / modal-body -->
<div class="modal-footer pb-40">
<p class="text-center w-100 fs-14 mb-0">Already have an account? <a href="#x" class="link-underline">Sign In</a></p>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / register-modal -->
Alert Modals
Show different alert messages using a modal component.
<!-- alert-modal -->
<a href="#x" class="btn btn-success" data-bs-toggle="modal" data-bs-target=".success-modal"><i class="bi-lightbulb mr-5"></i> <span> Success</span></a>
<!-- modal -->
<div class="modal fade success-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content bg-success dark-mode text-center">
<div class="modal-body pb-40">
<i class="bi-check-circle text-white fs-60"></i>
<h4 class="fs-20 mb-15">Congrats!</h4>
<p class="mb-30 text-white">Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
<button type="button" class="btn btn-outline-white" data-bs-dismiss="modal"><i class="bi-save fs-14 mr-5"></i> <span>Save</span></button>
</div><!-- / modal-body -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / alert-modal -->
<!-- info-alert-modal -->
<a href="#x" class="btn btn-info" data-bs-toggle="modal" data-bs-target=".info-modal"><i class="bi-exclamation-circle mr-5"></i> <span> Info Alert</span></a>
<!-- modal -->
<div class="modal fade info-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content bg-info dark-mode text-center">
<div class="modal-body pb-40">
<i class="bi-info-circle text-white fs-60"></i>
<h4 class="fs-20 mb-15">Heads Up!</h4>
<p class="mb-30 text-white">Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
<button type="button" class="btn btn-outline-white" data-bs-dismiss="modal"><i class="bi-x-circle fs-14 mr-5"></i> <span>Clear Alert</span></button>
</div><!-- / modal-body -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / info-alert-modal -->
<!-- warning-alert-modal -->
<a href="#x" class="btn btn-warning" data-bs-toggle="modal" data-bs-target=".warning-modal"><i class="bi-exclamation-triangle mr-5"></i> <span> Warning</span></a>
<!-- modal -->
<div class="modal fade warning-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body pb-40">
<i class="bi-exclamation-triangle text-warning fs-60"></i>
<h4 class="fs-20 mb-15">Warning!</h4>
<p class="mb-30">Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
<button type="button" class="btn btn-warning" data-bs-dismiss="modal"><i class="bi-x-circle fs-14 mr-5"></i> <span>Clear Alert</span></button>
</div><!-- / modal-body -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / warning-alert-modal -->
<!-- danger-alert-modal -->
<a href="#x" class="btn btn-danger" data-bs-toggle="modal" data-bs-target=".danger-modal"><i class="bi-exclamation-octagon mr-5"></i> <span> Danger</span></a>
<!-- modal -->
<div class="modal fade danger-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body pb-40">
<i class="bi-exclamation-octagon text-danger fs-60"></i>
<h4 class="fs-20 mb-15">Danger!</h4>
<p class="mb-30">Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi-x-circle fs-14 mr-5"></i> <span>Close</span></button>
</div><!-- / modal-body -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / danger-alert-modal -->
Modal Positions
Use utilities to modify a .badge and position it in the corner of a link or button.
<!-- top-modal -->
<a href="#x" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".top-modal"><i class="bi-arrow-up mr-5"></i> <span>Top Modal</span></a>
<!-- modal -->
<div class="modal fade top-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Top Modal</h5>
</div><!-- / modal-header -->
<div class="modal-body">
<p>Modal body text goes here. Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
</div><!-- / modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi-x-circle mr-5"></i> <span>Close</span></button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal"><i class="bi-check-circle mr-5"></i> <span>Save</span></button>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / top-modal -->
<!-- bottom-modal -->
<a href="#x" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bottom-modal"><i class="bi-arrow-down mr-5"></i> <span>Bottom Modal</span></a>
<!-- modal -->
<div class="modal fade bottom-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-bottom">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Bottom Modal</h5>
</div><!-- / modal-header -->
<div class="modal-body">
<p>Modal body text goes here. Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
</div><!-- / modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi-x-circle mr-5"></i> <span>Close</span></button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal"><i class="bi-check-circle mr-5"></i> <span>Save</span></button>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / bottom-modal -->
<!-- center-modal -->
<a href="#x" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".center-modal"><i class="bi-arrows-move mr-5"></i> <span>Center Modal</span></a>
<!-- modal -->
<div class="modal fade center-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Center Modal</h5>
</div><!-- / modal-header -->
<div class="modal-body">
<p>Modal body text goes here. Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
</div><!-- / modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi-x-circle mr-5"></i> <span>Close</span></button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal"><i class="bi-check-circle mr-5"></i> <span>Save</span></button>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / center-modal -->