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

Step Wizard
Demo    Download
Bootstrap-4-For-Step-Wizard-Style-Interface-–-Smart-Wizard
File Size: 19.85 KB
Views Total: 14315 views
Last Update:March 01, 2021
Publish Date: February 09, 2012
Official Website: Go to website
License: MIT
Plugin Author: techlab

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.

Table of Contents

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();

List Of Version :
  • 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.