Simple jQuery & Bootstrap Based Wizard Interface - Wizard.js

File Size: 149 KB
Views Total: 1941
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery & Bootstrap Based Wizard Interface - Wizard.js

Wizard.js is a jQuery content stepper plugin which makes use of Bootstrap's modal component to display any type of content in a step-by-step wizard interface. The plugin also allows to fire some events if action buttons are clicked. Form validation is supported as well (Requires jQuery validate plugin).

How to use it:

1. Make sure you first have jQuery library and Bootstrap framework are installed properly in the webpage.

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

2. Create custom steps for the wizard.

<div class="wizard" id="wizard">

  <div class="wizard-step" data-title="Step One">
      This is step one

  <div class="wizard-step" data-title="Step Two">
      This is step two

  <div class="wizard-step" data-title="Step Three">
      This is step three


3. Initialize the wizard.


4. Open the wizard.


5. Full customization options and callback functions.

// wizard title
title: '',

// validation rules
validators: null,

// callbacks
onSubmit: null,
onReset: null,
onCancel: null,
onClose: null,
onOpen: null,

// custom text
previousText: '<< Back',
nextText: 'Next >>',
submitText: 'Submit',
cancelText: 'Cancel',

// shows cancel/prev buttons
showCancel: true,
showPrevious: true,

// shows progress bar
showProgress: false,

// is modal mode
isModal: true,

// auto open on page load
autoOpen: false

Change log:


  • add submit, cancelText


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