Evince - Responsive Admin Dashboard Template

JS

In order to use this plugin on your page you will need to include the following script in the page.


<script src="plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<script src="js/pages/form-wizard.js"></script>

CSS

In order to use this plugin on your page you will need to include the following css in the page.

copy


<link rel="stylesheet" href="plugins/bootstrap-datepicker/css/datepicker.css" />

First Name

Last Name

Email address

Password

Confirm Password

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

Product Name

Product ID

Quantity

Card Number

Card Holders Name

Expiration

CSV

By pressing Next You will Agree to the Payment Terms & Conditions

Thank You!

Congratulations! You got the last step.

copy


<div id="rootwizard">
    <ul class="nav mb-4  nav-pills nav-fill" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-pills-tab" data-toggle="tab" href="#home3" role="tab" aria-controls="home3" aria-selected="true">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="profile-pills-tab" data-toggle="tab" href="#profile3" role="tab" aria-controls="profile3" aria-selected="false">Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="contact-pills-tab" data-toggle="tab" href="#contact3" role="tab" aria-controls="contact3" aria-selected="false">Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="finish-pills-tab" data-toggle="tab" href="#finish3" role="tab" aria-controls="finish3" aria-selected="false">Finish</a>
        </li>

    </ul>
    <div class="progress progress-sm m-t-sm">
        <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        </div>
    </div>
    <form id="wizardForm">
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home3" role="tabpanel">
                <div class="row m-b-lg">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="exampleInputName">First Name</label>
                                <input type="text" class="form-control" name="exampleInputName" id="exampleInputName" placeholder="First Name">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="exampleInputName2">Last Name</label>
                                <input type="text" class="form-control" name="exampleInputName2" id="exampleInputName2" placeholder="Last Name">
                            </div>
                            <div class="form-group col-md-12">
                                <label for="exampleInputEmail">Email address</label>
                                <input type="email" class="form-control" name="exampleInputEmail" id="exampleInputEmail" placeholder="Enter email">
                            </div>
                            <div class="form-group col-md-12">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" name="exampleInputPassword1" id="exampleInputPassword1" placeholder="Password">
                            </div>
                            <div class="form-group col-md-12">
                                <label for="exampleInputPassword2">Confirm Password</label>
                                <input type="password" class="form-control" name="exampleInputPassword2" id="exampleInputPassword2" placeholder="Confirm Password">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="profile3" role="tabpanel">
                <div class="row m-b-lg">
                    <div class="col-md-3">
                        <div>
                            <address>
                                                                    <strong>Twitter, Inc.</strong><br>
                                                                    795 Folsom Ave, Suite 600<br>
                                                                    San Francisco, CA 94107<br>
                                                                    <abbr title="Phone">P:</abbr> (123) 456-7890
                                                                </address>
                            <address>
                                                                    <strong>Full Name</strong><br>
                                                                    <a href="mailto:#">first.last@example.com</a>
                                                                </address>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="exampleInputProductName">Product Name</label>
                            <input type="text" class="form-control" name="exampleInputProductName" id="exampleInputProductName" placeholder="Product Name">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputProductId">Product ID</label>
                            <input type="text" class="form-control" name="exampleInputProductId" id="exampleInputProductId" placeholder="Product ID">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputQuantity">Quantity</label>
                            <input type="number" min="1" max="5" class="form-control" name="exampleInputQuantity" id="exampleInputQuantity" placeholder="Quantity">
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="contact3" role="tabpanel">
                <div class="row m-b-lg">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="exampleInputCard">Card Number</label>
                            <div class="row">
                                <div class="col-lg-7 col-md-6 mb-sm-4 mb-md-0">
                                    <input type="text" class="form-control" name="exampleInputCard" id="exampleInputCard" placeholder="Card Number">
                                </div>
                                <div class="col-lg-5 col-md-6">
                                    <input type="text" class="form-control" name="exampleInputSecurity" id="exampleInputSecurity" placeholder="Security Code">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputHolder">Card Holders Name</label>
                            <input type="text" class="form-control" name="exampleInputHolder" id="exampleInputHolder" placeholder="Card Holders Name">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputExpiration">Expiration</label>
                            <input type="text" class="form-control date-picker" name="exampleInputExpiration" id="exampleInputExpiration" placeholder="Expiration">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputCsv">CSV</label>
                            <input type="text" class="form-control" name="exampleInputCsv" id="exampleInputCsv" placeholder="CSV">
                        </div>
                        <div class="form-group">
                            <label class="f-s-12">By pressing Next You will Agree to the Payment <a href="#">Terms & Conditions</a></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="finish3" role="tabpanel">
                <h3 style="margin-top:25px;">Thank You!</h3>
                <div class="alert alert-success m-t-sm m-b-lg" role="alert">
                    Congratulations! You got the last step.
                </div>
            </div>
            <ul class="pagination wizard">
                <li class="previous"><a href="#" class="btn btn-outline-primary">Previous</a></li>
                <li class="next ml-auto"><a href="#" class="btn btn-outline-primary">Next</a></li>
            </ul>
        </div>
    </form>
</div>

Form Wizard

JS

CSS

Thank You!