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-primary" data-toggle="modal" data-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">
<h6 class="modal-title">Terms of Service</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</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-sm btn-secondary">I Got It</button>
<button type="button" class="btn btn-link text-danger ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Notification
<button type="button" class="btn btn-primary" data-toggle="modal" data-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-info modal-dialog-centered" role="document">
<div class="modal-content bg-gradient-secondary">
<div class="modal-header">
<p class="modal-title" id="modal-title-notification">A new experience, personalized for you.</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="py-3 text-center">
<span class="modal-icon display-1-lg"><i class="far fa-envelope-open"></i></span>
<h4 class="modal-title my-3">Important message!</h4>
<p>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">
<button type="button" class="btn btn-sm btn-white">Go to Inbox</button>
</div>
</div>
</div>
</div>Sign in modal Pro
<button type="button" class="btn btn-primary" data-toggle="modal" data-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">
<div class="modal-body p-0">
<div class="card bg-soft shadow-md border-0">
<div class="card-header bg-white py-4">
<div class="text-muted text-center">
<h3>Log-in to your account </h3>
<span class="text-gray">Enter your account details below</span>
</div>
</div>
<div class="card-body bg-secondary text-white">
<form action="#" class="mt-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-user"></i></span>
</div>
<input type="email" class="form-control" id="input-email"
placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-unlock-alt"></i></span>
</div>
<input class="form-control" placeholder="Password" type="password" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="far fa-eye"></i>
</span>
</div>
</div>
<div class="d-block d-sm-flex justify-content-between align-items-center mt-2">
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
<span class="form-check-sign text-white"></span>
Remember me
</label>
</div>
<div><a href="./forgot-password.html" class="small text-right">Lost password?</a></div>
</div>
</div>
<div class="mt-3">
<button type="submit" class="btn btn-block btn-white">Sign in</button>
</div>
</form>
<div class="mt-3 mb-4 text-center">
<span class="font-weight-normal">or login with</span>
</div>
<div class="btn-wrapper my-4 text-center">
<button class="btn mr-2 btn-icon-only btn-pill btn-white" type="button">
<span class="btn-inner-icon"><i class="fab fa-twitter"></i></span>
</button>
<button class="btn mr-2 btn-icon-only btn-pill btn-white" type="button">
<span class="btn-inner-icon"><i class="fab fa-facebook-f"></i></span>
</button>
<button class="btn mr-2 btn-icon-only btn-pill btn-white" type="button">
<span class="btn-inner-icon"><i class="fab fa-google"></i></span>
</button>
</div>
<div class="d-block d-sm-flex justify-content-center align-items-center mt-4">
<span class="font-weight-normal">
Not registered?
<a href="./sign-up.html" class="font-weight-bold">Create account</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Sign up modal Pro
<button type="button" class="btn btn-primary" data-toggle="modal" data-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">
<div class="modal-body p-0">
<div class="card bg-soft shadow-md border-0">
<div class="card-header bg-white py-4">
<div class="text-muted text-center">
<h4>Sign up for free</h4>
<span class="text-gray">No setup fees. No requirements.</span>
</div>
</div>
<div class="card-body bg-primary text-white">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-user"></i></span>
</div>
<input type="email" class="form-control" id="input-email-2"
placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-unlock-alt"></i></span>
</div>
<input class="form-control" placeholder="Password" type="password" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="far fa-eye"></i>
</span>
</div>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-unlock-alt"></i></span>
</div>
<input type="password" class="form-control" id="input-password-confirm"
placeholder="Confirm password" required>
</div>
<div class="d-block d-sm-flex justify-content-between align-items-center mt-2">
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
<span class="form-check-sign"></span>
I agree to the <a href="./terms.html">terms and conditions</a>
</label>
</div>
</div>
</div>
<div class="mt-3">
<button type="submit" class="btn btn-block btn-white">Sign in</button>
</div>
</form>
<div class="mt-3 mb-4 text-center">
<span class="font-weight-normal">or</span>
</div>
<div class="btn-wrapper my-4 text-center">
<button class="btn mr-2 btn-icon-only btn-pill btn-white" type="button">
<span class="btn-inner-icon"><i class="fab fa-twitter"></i></span>
</button>
<button class="btn mr-2 btn-icon-only btn-pill btn-white" type="button">
<span class="btn-inner-icon"><i class="fab fa-facebook-f"></i></span>
</button>
<button class="btn mr-2 btn-icon-only btn-pill btn-white" type="button">
<span class="btn-inner-icon"><i class="fab fa-google"></i></span>
</button>
</div>
<div class="d-block d-sm-flex justify-content-center align-items-center mt-4">
<span class="font-weight-normal">
Already have an account?
<a href="./sign-in-illustration.html" class="font-weight-bold">Login here</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Achievement modal Pro
<button type="button" class="btn btn-tertiary" data-toggle="modal" data-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 modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header mx-auto">
<p class="lead mb-0">You just unlocked a new badge</p>
</div>
<div class="modal-body">
<div class="py-3 px-5 text-center">
<span class="modal-icon display-1-lg"><i class="fas fa-medal"></i></span>
<h3 class="modal-title mb-3">Author Level 5</h3>
<p class="mb-4">One Thousand Dollars! Well done mate - heads are turning your way.</p>
<div class="progress-wrapper">
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-white text-tertiary">All badges</button>
<button type="button" class="close ml-auto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>Subscribe modal Pro
<button type="button" class="btn btn-primary mb-3" data-toggle="modal" data-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="close ml-auto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center py-3">
<span class="modal-icon display-1-lg"><i class="fas fa-envelope-open-text"></i></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-sm-flex flex-column flex-sm-row mb-3 justify-content-center">
<input type="text" placeholder="Enter your email adress here" class="mr-sm-1 mb-2 mb-sm-0 form-control form-control-lg">
<button type="submit" class="ml-sm-1 btn btn-tertiary">Subscribe</button>
</div>
</div>
</div>
<div class="modal-footer z-2 mx-auto text-center">
<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>