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 Modal -->
<button type="button" class="btn btn-block btn-primary mb-4" data-toggle="modal" data-target="#modal-default">Default</button>
<!-- Modal Content -->
<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 mb-0" id="modal-title-default">Terms of Service</h2>
<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-primary">I Got It</button>
<button type="button" class="btn btn-primary text-danger ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Modal Content -->Notification
<!-- Button Modal -->
<button type="button" class="btn btn-block btn-primary mb-4" data-toggle="modal" data-target="#modal-notification">Notification</button>
<!-- Modal Content -->
<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">
<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"><span class="far fa-envelope-open"></span></span>
<h2 class="h4 my-3">Important message!</h2>
<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-primary">Go to Inbox</button>
</div>
</div>
</div>
</div>
<!-- End of Modal Content -->Sign in modal Pro
<!-- Button Modal -->
<button type="button" class="btn btn-block btn-primary mb-4" data-toggle="modal" data-target="#modal-form">Sign
In</button>
<!-- Modal Content -->
<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-primary shadow-soft border-light p-4">
<button type="button" class="close ml-auto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="card-header 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">
<label for="exampleInputIcon3">Your email</label>
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><span class="fas fa-envelope"></span></span>
</div>
<input class="form-control" id="exampleInputIcon3" placeholder="[email protected]" type="text" aria-label="email adress">
</div>
</div>
<!-- End of Form -->
<div class="form-group">
<!-- Form -->
<div class="form-group">
<label for="exampleInputPassword6">Password</label>
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
</div>
<input class="form-control" id="exampleInputPassword6" placeholder="Password" type="password" aria-label="Password" required>
</div>
</div>
<!-- End of Form -->
<div class="d-block d-sm-flex justify-content-between align-items-center mb-4">
<div class="form-check mb-2 mb-sm-0">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck5">
<label class="form-check-label" for="defaultCheck5">
Remember me
</label>
</div>
<div><a href="#" class="small text-right">Lost password?</a></div>
</div>
</div>
<button type="submit" class="btn btn-block btn-primary">Sign in</button>
</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 btn-icon-only btn-pill btn-outline-light text-facebook mr-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-light text-twitter mr-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-light text-facebook" type="button" aria-label="github button" title="github button">
<span aria-hidden="true" class="fab fa-github"></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="#" class="font-weight-bold">Create account</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of Modal Content -->Sign up modal Pro
<!-- Button Modal -->
<button type="button" class="btn btn-block btn-primary mb-4" data-toggle="modal" data-target="#modal-form-signup">Sign
Up</button>
<!-- Modal Content -->
<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-primary shadow-soft border-light p-4">
<button type="button" class="close ml-auto" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="card-header text-center pb-0">
<h2 class="mb-0 h5">Create Account</h2>
</div>
<div class="card-body">
<form action="#">
<!-- Form -->
<div class="form-group">
<label for="exampleInputIcon4">Your email</label>
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><span class="fas fa-envelope"></span></span>
</div>
<input class="form-control" id="exampleInputIcon4" placeholder="[email protected]" type="text" aria-label="email adress">
</div>
</div>
<!-- End of Form -->
<div class="form-group">
<!-- Form -->
<div class="form-group">
<label for="exampleInputPassword7">Password</label>
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
</div>
<input class="form-control" id="exampleInputPassword7" placeholder="Password" type="password" aria-label="Password" required>
</div>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="form-group">
<label for="exampleConfirmPassword7">Confirm Password</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
</div>
<input class="form-control" id="exampleConfirmPassword7" placeholder="Confirm password" type="password" aria-label="Password" required>
</div>
</div>
<!-- End of Form -->
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck6">
<label class="form-check-label" for="defaultCheck6">
I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
<button type="submit" class="btn btn-block btn-primary">Sign in</button>
</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 btn-icon-only btn-pill btn-outline-light text-facebook mr-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-light text-twitter mr-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-light text-facebook" type="button" aria-label="github button" title="github button">
<span aria-hidden="true" class="fab fa-github"></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="#" class="font-weight-bold">Login here</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of Modal Content -->Achievement modal Pro
<!-- Button Modal -->
<button type="button" class="btn btn-block btn-primary mb-4" data-toggle="modal" data-target="#modal-achievement">Achievement</button>
<!-- Modal Content -->
<div class="modal fade" id="modal-achievement" tabindex="-1" role="dialog" aria-labelledby="modal-achievement" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content shadow-soft">
<div class="modal-header mx-auto">
<span class="lead mb-0">You just unlocked a new badge</span>
<button type="button" class="close ml-auto" 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 icon icon-dark display-1-lg"><span class="fas fa-medal"></span></span>
<h2 class="h4 modal-title my-2">Author Level 5</h2>
<p>One Thousand Dollars! Well done - heads are turning your way.</p>
<div class="progress-wrapper">
<div class="progress">
<div class="progress-bar bg-dark" 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-primary">All badges</button>
</div>
</div>
</div>
</div>
<!-- End of Modal Content -->Subscribe modal Pro
<!-- Button Modal -->
<button type="button" class="btn btn-block btn-primary mb-4" data-toggle="modal" data-target="#modal-subscribe">Subscribe</button>
<!-- Modal Content -->
<div class="modal fade" id="modal-subscribe" tabindex="-1" role="dialog" aria-labelledby="modal-subscribe" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content shadow-soft">
<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 px-6">
<div class="py-3">
<div class="text-center">
<span class="modal-icon icon icon-lg display-1-lg"><span class="fas fa-envelope-open-text"></span></span>
<h2 class="h4 modal-title my-2">Join our 1,360,462 subscribers</h2>
<p class="mb-4">Get exclusive access to freebies, premium products and news.</p>
</div>
<div class="form-group">
<label for="exampleInputEmail6">Email address</label>
<div class="d-sm-flex flex-column flex-sm-row mb-3 justify-content-center">
<input type="text" id="exampleInputEmail6" 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-primary">Subscribe</button>
</div>
</div>
</div>
</div>
<div class="modal-footer z-2 mx-auto text-center">
<p class="text-gray">
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>
<!-- End of Modal Content -->