Bootstrap Plugin For Step Wizard Style Interface – Smart Wizard

jQuery Smart Wizard 4
File Size:52.46 KB
Views Total:1,441
Last Update:February 14, 2018
Publish Date:February 14, 2018
Official Website:Go to website
License:MIT

Smart Wizard is a jquery plugin and easily customizable jQuery step wizard plugin with Bootstrap support. It is easy to implement and gives a neat and stylish interface for your forms, you can also use in checkout screen, registration steps etc.  The step wizard active step by step indication with support in validation. We have added a lot of features not limited to Bootstrap support, themes, customizable toolbars, customizable options, public methods, event support and a lot more.

How to use :

1. Add the core stylesheet SmartWizard.css :

<!-- Main SmartWizard CSS -->
<link href="smart_wizard.min.css" rel="stylesheet">

<!-- Optional SmartWizard themes -->
<link href="smart_wizard_theme_circles.min.css" rel="stylesheet">
<link href="smart_wizard_theme_arrows.min.css" rel="stylesheet">
<link href="smart_wizard_theme_dots.min.css" rel="stylesheet">

2. Add basic HTML structure for the smart wizard :

<div id="smartwizard">
  <ul>
    <li><a href="#step-1">Step 1<br /><small>This is tab's description</small></a></li>
    <li><a href="#step-2">Step 2<br /><small>This is tab's description</small></a></li>
    <li><a href="#step-3">Step 3<br /><small>This is tab's description</small></a></li>
    <li><a href="#step-4">Step 4<br /><small>This is tab's description</small></a></li>
  </ul>
  
  <div>
      <div id="step-1" class="">
        <h2>Step 1 Content</h2>
      </div>
      <div id="step-2" class="">
        <h2>Step 2 Content</h2>
      </div>
      <div id="step-3" class="">
        <h2>Step 3 Content</h2>
      </div>
      <div id="step-4" class="">
        <h2>Step 4 Content</h2>
      </div>
  </div>
</div>

3. Add jQuery library and the jQuery Smart Wizard plugin’s script :

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.smartWizard.min.js"></script>

4. Initialize the smart wizard with default options :

$('#smartwizard').smartWizard();

Done

Change Log

v4.2.2 (2017-03-27)

  • Small fixes and multiple wizard example added

v4.2.1 (2017-03-27)

  • Dots and Circles themes updated to new design and made responsive

v4.1.7 (2017-02-21)

  • Dots and Circles themes updated to new design and made responsive

v4.1.5 (2017-02-01)

  • JS & CSS update

v4.1.2 (2017-01-09)

  • JS & CSS update

v4.1.1 (2016-12-08)

  • many improvements and additions

2016-11-16

  • Updated to version v4.0.5