Easy Step Wizard UI Based On jQuery And Bootstrap

An easy-to-use step-by-step wizard user interface built with jQuery and Bootstrap 5 or 4 framework.

How to use it:

1. Include the latest jQuery library and Bootstrap framework on the page.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Include the jqueryBootstrapWizard plugin after jQuery.

<script src="/path/to/cdn/src/jquery.bootstrap.wizard.js"></script>

3. Create a wizard interface from a Bootstrap tabs component.

<div id="navWizard">
  <ul id="navWizardSteps" class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Step One</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Step Two</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Step Three</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      Step One Content
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      Step Two Content
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
      Step Three Content
    </div>
  </div>
</div>

4. Initialize the wizard and trigger a function after you've finished the process.

$('#navWizard').jqueryBootstrapWizard({
  onFinish: function() {
    alert('Finish!');
  }
});

5. Trigger function before/after the wizard step is shown.

$('#navWizard').jqueryBootstrapWizard({
  onBeforeShowTab: function(e) {
    //e.targetIndex: newly activated tab index
    //e.relatedTargetIndex: previous active tab
  },
  onShownTab: function(e) {
    //e.targetIndex: newly activated tab index
    //e.relatedTargetIndex: previous active tab
  },
});

6. Add a link to the cancel button. Can be used to redirect the page to another URL when the user cancels the wizard.

$('#navWizard').jqueryBootstrapWizard({
  cancel_url: 'https://www.jqueryscript.net'
});

7. Customize the button labels.

$.fn.jqueryBootstrapWizard.labels = {
  btn_back: 'Back',
  btn_next: 'Next',
  btn_finish: 'Finish',
  btn_cancel: 'Cancel'
}

---

This awesome jQuery plugin is developed by IsaRoGaMX. For more Advanced Usages, please check the demo page or visit the official website.