Demo code snippets

bs-wizard.html

  <div class="row bs-wizard">  
    <div class="col-lg-3">
      <ol class="bs-wizard-sidebar">
        <li class="bs-wizard-todo bs-wizard-active"><a href="javascript:void(0)">Step1</a></li>
        <li class="bs-wizard-todo"><a href="javascript:void(0)">Step2</a></li>
        <li class="bs-wizard-todo"><a href="javascript:void(0)">Step3</a></li>
      </ol>
    </div>

    <div class="col-lg-9">
      <form method="get" action="" accept-charset="UTF-8">
      <fieldset>
        <div class="bs-step inv">
          <legend>First Step</legend>
          <div class="bs-step-inner">
            <div class="form-group">
              <label for="field_1">Field 1</label> 
              <input type="text" class="form-control" value="" name="field_1" id="field_1" autofocus="autofocus">
            </div>

            <div class="form-group">
              <label for="field_2">Field 2</label> 
              <input type="text" class="form-control" value="" size="30" name="field_2" id="field_2">
            </div>
          </div>
        </div>

        <div class="bs-step inv">
          <legend>Second Step</legend>
          <div class="bs-step-inner">
            <div class="form-group">
              <label for="field_3">Field 3</label> 
              <input type="text" class="form-control" value="" size="30" name="field_3" id="field_3">
            </div>

            <div class="form-group">
              <label for="field_4">Field 4</label> 
              <input type="text" class="form-control" value="" size="30" name="field_4" id="field_4">
            </div>
          </div>
        </div>

        <div class="bs-step inv">
          <legend>Third Step</legend>
          <div class="bs-step-inner">
            <div class="form-group">
              <label for="field_5">Field 5</label> 
              <input type="text" class="form-control" value="" size="30" name="field_5" id="field_5">
            </div>

            <div class="form-group">
              <label for="field_6">Field 6</label> 
              <input type="text" class="form-control" value="" size="30" name="field_6" id="field_6">
            </div>

            <button class="btn btn-default" type="reset" id="last-back">Go Back</button>
            <input class="btn btn-primary submit-btn" type="submit" value="Submit" />
          </div>
        </div>
      </fieldset>
      </form> 
    </div>
  </div>