Dashkit Wizard

wizard.html

<form class="tab-content">
  <div class="tab-pane fade show active" id="wizardStepOne" role="tabpanel" aria-labelledby="wizardTabOne">

    Step 1

    <div class="row align-items-center mt-4">
      <div class="col-auto">
        <button class="btn btn-lg btn-white" type="reset">Cancel</button>
      </div>
      <div class="col text-center">
        <h6 class="text-uppercase text-muted mb-0">Step 1 of 3</h6>
      </div>
      <div class="col-auto">
        <a class="btn btn-lg btn-primary" data-toggle="wizard" href="#wizardStepTwo">Continue</a>
      </div>
    </div>

  </div>
  <div class="tab-pane fade" id="wizardStepTwo" role="tabpanel" aria-labelledby="wizardTabTwo">

    Step 2

    <div class="row align-items-center mt-4">
      <div class="col-auto">
        <a class="btn btn-lg btn-white" data-toggle="wizard" href="#wizardStepOne">Back</a>
      </div>
      <div class="col text-center">
        <h6 class="text-uppercase text-muted mb-0">Step 2 of 3</h6>
      </div>
      <div class="col-auto">
        <a class="btn btn-lg btn-primary" data-toggle="wizard" href="#wizardStepThree">Continue</a>
      </div>
    </div>

  </div>
  <div class="tab-pane fade" id="wizardStepThree" role="tabpanel" aria-labelledby="wizardTabThree">

    Step 3

    <div class="row align-items-center mt-4">
      <div class="col-auto">
        <a class="btn btn-lg btn-white" data-toggle="wizard" href="#wizardStepTwo">Back</a>
      </div>
      <div class="col text-center">
        <h6 class="text-uppercase text-muted mb-0">Step 3 of 3</h6>
      </div>
      <div class="col-auto">

      </div>
    </div>

  </div>

  <hr>

  <button class="btn btn-lg btn-primary btn-block mt-6" type="submit">Create</button>
</form>