Modals
Use modals to develop faster and more interactive user interfaces
Default
The following example is a simple way of toggling a modal based on clicking on an element:
<button type="button" class="btn btn-block btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#modal-default">Default</button>
<div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="h6 modal-title">Terms of Service</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.</p>
<p>The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as
soon as possible of high-risk data breaches that could personally affect them.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">Accept</button>
<button type="button" class="btn btn-link text-gray ms-auto" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Notification
<button type="button" class="btn btn-block btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#modal-notification">Notification</button>
<div class="modal fade" id="modal-notification" tabindex="-1" role="dialog" aria-labelledby="modal-notification" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content bg-primary text-white">
<div class="modal-header border-0">
<button type="button" class="btn-close bg-gray-500" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="py-3 text-center">
<span class="modal-icon display-1-lg"><span class="far fa-envelope-open"></span></span>
<h2 class="h4 modal-title my-3">Important message!</h2>
<p class="px-lg-5">Do you know that you can assign status and relation to a company right in the visit list?.</p>
</div>
</div>
<div class="modal-footer border-secondary">
<button type="button" class="btn btn-sm btn-white">Go to Inbox</button>
</div>
</div>
</div>
</div>Login modal Pro
<button type="button" class="btn btn-block btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#modal-form">Sign In</button>
<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content rounded">
<div class="modal-body p-0">
<div class="card border-gray-300 p-4">
<button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="card-header border-0 bg-white text-center pb-0">
<h2 class="h4">Sign in to our platform</h2>
<span>Login here using your username and password</span>
</div>
<div class="card-body">
<form action="#" class="mt-4">
<!-- Form -->
<div class="form-group mb-4">
<label for="exampleInputEmailModal">Your Email</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon1"><span class="fas fa-envelope"></span></span>
<input type="email" class="form-control" placeholder="[email protected]" id="exampleInputEmailModal" aria-describedby="exampleInputEmailModal">
</div>
</div>
<!-- End of Form -->
<div class="form-group">
<!-- Form -->
<div class="form-group mb-4">
<label for="exampleInputPasswordModal1">Your Password</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon2"><span class="fas fa-unlock-alt"></span></span>
<input type="password" placeholder="Password" class="form-control" id="exampleInputPasswordModal1" aria-describedby="exampleInputPasswordModal1">
</div>
</div>
<!-- End of Form -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck55">
<label class="form-check-label mb-0" for="defaultCheck55">
Remember me
</label>
</div>
<div><a href="#" class="small text-right">Lost password?</a></div>
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
<div class="mt-3 mb-4 text-center">
<span class="fw-normal">or login with</span>
</div>
<div class="btn-wrapper my-4 text-center">
<button class="btn btn-icon-only btn-pill btn-outline-gray-400 me-2 text-facebook" type="button" aria-label="facebook button" title="facebook button">
<span aria-hidden="true" class="fab fa-facebook-f"></span>
</button>
<button class="btn btn-icon-only btn-pill btn-outline-gray-400 text-twitter me-2" type="button" aria-label="twitter button" title="twitter button">
<span aria-hidden="true" class="fab fa-twitter"></span>
</button>
<button class="btn btn-icon-only btn-pill btn-outline-gray-400 text-github" type="button" aria-label="github button" title="github button">
<span aria-hidden="true" class="fab fa-github"></span>
</button>
</div>
<p class="mt-4 text-center">Not registered? <a href="#" class="fw-bold text-underline">Create account</a></p>
</div>
</div>
</div>
</div>
</div>
</div>Register modal Pro
<button type="button" class="btn btn-block btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#modal-form-signup">Sign Up</button>
<div class="modal fade" id="modal-form-signup" tabindex="-1" role="dialog" aria-labelledby="modal-form-signup" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content rounded">
<div class="modal-body p-0">
<div class="card border-gray-300 p-4">
<button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="card-header border-0 bg-white text-center pb-0">
<h2 class="mb-0 h5">Create Account</h2>
</div>
<div class="card-body">
<form action="#">
<!-- Form -->
<div class="form-group mb-4">
<label for="exampleInputEmailModal2">Your Email</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon3"><span class="fas fa-envelope"></span></span>
<input type="email" class="form-control" placeholder="[email protected]" id="exampleInputEmailModal2" aria-describedby="exampleInputEmailModal2">
</div>
</div>
<!-- End of Form -->
<div class="form-group">
<!-- Form -->
<div class="form-group mb-4">
<label for="exampleInputPasswordModal3">Your Password</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon4"><span class="fas fa-unlock-alt"></span></span>
<input type="password" placeholder="Password" class="form-control" id="exampleInputPasswordModal3" aria-describedby="exampleInputPasswordModal3">
</div>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="form-group mb-4">
<label for="exampleInputPasswordModal4">Confirm Password</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon5"><span class="fas fa-unlock-alt"></span></span>
<input type="password" placeholder="Confirm Password" class="form-control" id="exampleInputPasswordModal4" aria-describedby="exampleInputPasswordModal4">
</div>
</div>
<!-- End of Form -->
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck66">
<label class="form-check-label text-dark" for="defaultCheck66">
I agree to the <a href="#" class="text-underline">terms and conditions</a>
</label>
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
<div class="mt-3 mb-4 text-center">
<span class="fw-normal">or</span>
</div>
<div class="btn-wrapper my-4 text-center">
<button class="btn btn-icon-only btn-pill btn-outline-gray-400 text-facebook me-2" type="button" aria-label="facebook button" title="facebook button">
<span aria-hidden="true" class="fab fa-facebook-f"></span>
</button>
<button class="btn btn-icon-only btn-pill btn-outline-gray-400 text-twitter me-2" type="button" aria-label="twitter button" title="twitter button">
<span aria-hidden="true" class="fab fa-twitter"></span>
</button>
<button class="btn btn-icon-only btn-pill btn-outline-gray-400 text-github" type="button" aria-label="github button" title="github button">
<span aria-hidden="true" class="fab fa-github"></span>
</button>
</div>
<p class="mt-4 text-center">Already have an account? <a href="#" class="fw-bold text-underline">Login here</a></p>
</div>
</div>
</div>
</div>
</div>
</div>Achievement Pro
<button type="button" class="btn btn-block btn-tertiary mb-3" data-bs-toggle="modal" data-bs-target="#modal-achievement">Achievement</button>
<div class="modal fade" id="modal-achievement" tabindex="-1" role="dialog" aria-labelledby="modal-achievement" aria-hidden="true">
<div class="modal-dialog modal-tertiary text-white modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
You just unlocked a new badge
<button type="button" class="btn-close bg-gray-500" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="py-3 px-5 text-center">
<span class="modal-icon display-1-lg"><span class="fas fa-medal"></span></span>
<h2 class="h3 modal-title mb-3">Author Level 5</h2>
<p class="mb-4">One Thousand Dollars! Well done mate - heads are turning your way.</p>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="modal-footer mx-auto">
<button type="button" class="btn btn-sm btn-white text-tertiary">All badges</button>
</div>
</div>
</div>
</div>Subscribe newsletter Pro
<button type="button" class="btn btn-block btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#modal-subscribe">Subscribe</button>
<div class="modal fade" id="modal-subscribe" tabindex="-1" role="dialog" aria-labelledby="modal-subscribe" aria-hidden="true">
<div class="modal-dialog modal-tertiary modal-dialog-centered modal-lg" role="document">
<div class="modal-content section-image overlay-dark" data-background="../../assets/img/pages/subscribe-image.jpg">
<div class="modal-header">
<button type="button" class="btn-close bg-gray-500" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center py-3 text-white">
<span class="modal-icon display-1"><span class="fas fa-envelope-open-text"></span></span>
<h3 class="modal-title mb-3">Join our 1,360,462 subscribers</h3>
<p class="mb-4 lead">Get exclusive access to freebies, premium products and news.</p>
<div class="form-group px-5">
<div class="d-flex flex-column flex-sm-row mb-3 justify-content-center">
<input type="text" class="me-sm-1 mb-2 mb-sm-0 form-control form-control-lg rounded" placeholder="[email protected]">
<button type="submit" class="ms-sm-1 btn btn-tertiary">Subscribe</button>
</div>
</div>
</div>
<div class="modal-footer z-2 mx-auto text-center pb-5">
<p class="text-white">
We’ll never share your details with third parties.
<br class="visible-md">View our <a href="#">Privacy Policy</a> for more info.
</p>
</div>
</div>
</div>
</div>