Bootstrap Step wizard jQuery Plugin

Jeffrey Polk July 09, 2023


Live Preview Download

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.

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.

<-- Step One -->
This is step one
<-- Step Two -->
Your PayPal email address
<-- Step Three -->
This is step three

Initialize the Step wizard jQuery Plugin.


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:

  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

Next: Best Website rank tracker

also view other related posts,