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 -->