Bootstrap 4 For Step Wizard Style Interface – Smart Wizard.js

Step Wizard
File Size: 19.85 KB
Views Total: 28498 views
Last Update:March 25, 2023
Publish Date: February 09, 2012
Official Website: Go to website
License: MIT
Plugin Author: techlab
Demo    Download

Smart Wizard is a step wizard jquery plugin with Bootstrap 4 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. There is lot of more features added with not limited with Bootstrap support, Bootstrap themes, customizable toolbars, customizable options, public methods, event support and a lot more.

How to use :

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">

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>

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>

Initialize the smart wizard with default options :

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

Done

Thanks for make jQuery plugin is developed by techlab For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v6.0.6
  • v6.0.5
  • v6.0.4
  • v6.0.3
  • v6.0.1
  • v5.1.1
  • v5.0.0
  • v4.4.1
  • v4.3.1
  • v4.2.2
  • v4.2.1
  • v4.1.7
  • v4.1.5
  • v4.1.2
  • v4.1.1
  • v4.0.5
  • v4.0.1
  • v2.0.1
  • 2.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.