Bootstrap Step wizard jQuery Plugin

The Bootstrap Step Wizard jQuery Plugin displays content in a step-by-step wizard using the bootstrap modal component. It handles step transitions, validation, and key events. The wizard and its steps are defined using structured HTML. The order of the "div" s determines the order of the steps. There are numerous customization options. Before proceeding, each step can be validated using form or custom validation.
To control the visibility and appearance of each step as users progress through the wizard, wizard provides methods such as .show(),.hide(), and.addClass(). Users can easily navigate multi-step processes while keeping a clear understanding of their progress.

How To Use Bootstrap Step Wizard jQuery Plugin :

Ensure that the jQuery library and the Bootstrap framework are properly installed on the webpage.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<link href="/path/to/wizard.min.css" rel="stylesheet">
<!-- YOUR BODY -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/wizard.min.js"></script>

The wizard and the steps it takes are defined by structured HTML. The order of the divs within the wizard determines the order of the steps presented. The wizard class defines the wizard, and the wizard-step class defines each step.

<!-- Begin wizard -->
<div class="wizard" id="devstocWizard" data-id="devstoc-1">
  
  <-- Step One -->
  <div class="wizard-step" data-title="Step One">
      This is step one
  </div>
  
  <-- Step Two -->
  <div class="wizard-step" data-title="Step Two">
	<label>PayPal Email</label>
	<input type="email" class="form-control">
	<small class="help-text">Your PayPal email address</small>
  </div>
  
  <-- Step Three -->
  <div class="wizard-step" data-title="Step Three">
      This is step three
  </div>

</div>
<!-- End wizard -->

Initialize the Step wizard jQuery Plugin.

$('#devstocWizard').wizard();

It is not possible to perform automatic initialization based on CSS classes. Every wizard will almost certainly need to provide some initialization options. To start a wizard, use JavaScript and pass the options. The default options are as follows:

$('#devstocWizard').wizard({
  title: '',
  validators: null,
  onSubmit: null,
  onReset: null,
  onCancel: null,
  onClose: null,
  onOpen: null,
  previousText: '<< Back',
  nextText: 'Next >>',
  submitText: 'Submit',
  cancelText: 'Cancel',
  showCancel: true,
  showPrevious: true,
  showProgress: false,
  isModal: true,
  autoOpen: false
});