Bootstrap Wizard v1.4.2

For more information please check Full Documentation

Build Your Profile

This information will let us know more about you.
Let's start with the basic information (with validation)
Choose Picture
What are you doing? (checkboxes)
Design
Code
Develop
Are you living in a nice area?
<div class="col-md-10 mr-auto ml-auto">
    <!--      Wizard container        -->
    <div class="wizard-container">
        <div class="card card-wizard" data-color="primary" id="wizardProfile">
            <form action="" method="">
        <!--        You can switch " data-color="primary" "  with one of the next bright colors: "green", "orange", "red", "blue"       -->
                <div class="card-header text-center">
                    <h3 class="card-title">
                       Build Your Profile
                    </h3>
                    <h5 class="description">This information will let us know more about you.</h5>

                      <div class="wizard-navigation">
                          <ul>
                              <li class="nav-item">
                                  <a class="nav-link active" href="#about" data-toggle="tab" role="tab" aria-controls="about" aria-selected="true">
                                    <i class="nc-icon nc-single-02"></i>
                                    About
                                  </a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link" href="#account" data-toggle="tab" role="tab" aria-controls="account" aria-selected="true">
                                    <i class="nc-icon nc-touch-id"></i>
                                    Account
                                  </a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link" href="#address" data-toggle="tab" role="tab" aria-controls="address" aria-selected="true">
                                    <i class="nc-icon nc-pin-3"></i>
                                    Address
                                  </a>
                              </li>
                          </ul>
                      </div>
                </div>

                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane show active" id="about">
                          <h5 class="info-text"> Let's start with the basic information (with validation)</h5>
                          <div class="row justify-content-center">
                                <div class="col-sm-4">
                                    <div class="picture-container">
                                        <div class="picture">
                                            <img src="/img/default-avatar.png" class="picture-src" id="wizardPicturePreview" title=""/>
                                            <input type="file" id="wizard-picture">
                                        </div>
                                        <h6 class="description">Choose Picture</h6>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="input-group">
                                      <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="nc-icon nc-single-02"></i></span>
                                      </div>

                                      <input type="text" class="form-control" placeholder="First Name (required)" name="firstname">
                                    </div>

                                    <div class="input-group">
                                      <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="nc-icon nc-circle-10"></i></span>
                                      </div>
                                      <input type="text" placeholder="Last Name (required)" class="form-control" name="lastname"/>
                                    </div>
                                </div>
                                <div class="col-lg-10 mt-3">
                                    <div class="input-group">
                                      <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="nc-icon nc-send"></i></span>
                                      </div>
                                      <input type="email" placeholder="Email (required)" class="form-control" name="email"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="account">
                            <h5 class="info-text"> What are you doing? (checkboxes) </h5>
                            <div class="row justify-content-center">
                                <div class="col-lg-10">
                                    <div class="row">
                                        <div class="col-sm-4">
                                            <div class="choice" data-toggle="wizard-checkbox">
                                                <input type="checkbox" name="jobb" value="Design">
                                                <div class="icon">
                                                    <i class="nc-icon nc-ruler-pencil"></i>
                                                </div>
                                                <h6>Design</h6>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="choice" data-toggle="wizard-checkbox">
                                                <input type="checkbox" name="jobb" value="Code">
                                                <div class="icon">
                                                    <i class="nc-icon nc-laptop"></i>
                                                </div>
                                                <h6>Code</h6>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="choice" data-toggle="wizard-checkbox">
                                                <input type="checkbox" name="jobb" value="Develop">
                                                <div class="icon">
                                                    <i class="nc-icon nc-atom"></i>
                                                </div>
                                                <h6>Develop</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="address">
                            <div class="row justify-content-center">
                                <div class="col-sm-12">
                                    <h5 class="info-text"> Are you living in a nice area? </h5>
                                </div>
                                <div class="col-sm-7">
                                    <div class="form-group">
                                        <label>Street Name</label>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Street No.</label>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-5">
                                    <div class="form-group">
                                        <label>City</label>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-5">
                                    <div class="form-group select-wizard">
                                        <label>Country</label>
                                        <select class="selectpicker" data-size="7" data-style="btn btn-primary btn-round" title="Single Select">
                                            <option value="Afghanistan"> Afghanistan </option>
                                            <option value="Albania"> Albania </option>
                                            <option value="Algeria"> Algeria </option>
                                            <option value="American Samoa"> American Samoa </option>
                                            <option value="Andorra"> Andorra </option>
                                            <option value="Angola"> Angola </option>
                                            <option value="Anguilla"> Anguilla </option>
                                            <option value="Antarctica"> Antarctica </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    <div class="pull-right">
                        <input type='button' class='btn btn-next btn-fill btn-rose btn-wd' name='next' value='Next' />
                        <input type='button' class='btn btn-finish btn-fill btn-rose btn-wd' name='finish' value='Finish' />
                    </div>

                    <div class="pull-left">
                        <input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='Previous' />
                    </div>
                    <div class="clearfix"></div>
                </div>

            </form>
        </div>
    </div> <!-- wizard container -->
</div>