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: 20.31 KB
Views Total: 8385 views
Last Update:March 22, 2020
Publish Date: December 11, 2019
Official Website: Go to website
License: MIT

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


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.