Flexible Bootstrap 3/4 Plugin To Create Wizard Style Interface - Smart Wizard

Flexible Bootstrap 3/4 Plugin To Create Wizard Style Interface - Smart Wizard

Smart Wizard is a jQuery plugin for Bootstrap 3/4 that lets you split long content into a step-by-step interactive wizard interface. Great for form wizard and step based tour guide.

More features:

  • AJAX enabled.
  • Events supported.
  • Styled with Bootstrap.
  • 3 built-in themes.
  • Supports URL hash.
  • Creates a step bar that shows the current step.
  • Keyboard navigation.
  • Supports both Bootstrap 4 and Bootstrap 3.

Basic usage:

1. Load the required Bootstrap's stylesheet in the webpage.

<link rel="stylesheet" href="bootstrap.min.css">

2. Load the core stylesheet SmartWizard.css and a theme CSS of your choice in the webpage.

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

3. The basic HTML structure for the smart wizard.

<div id="smartwizard">
    <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>
      <div id="step-1" class="">
        <h2>Step 1 Content</h2>
      <div id="step-2" class="">
        <h2>Step 2 Content</h2>
      <div id="step-3" class="">
        <h2>Step 3 Content</h2>
      <div id="step-4" class="">
        <h2>Step 4 Content</h2>

4. Load jQuery library and the jQuery Smart Wizard plugin's script at the end of the webpage.

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

5. Initialize the smart wizard with default options.


6. All default options which can be used to easily customize your wizard.

  // Initial selected step, 0 = first step 
  selected: 0,  
  // keyboard navigation
  // Automatically adjust content height
  // Allows to cycle the navigation of steps
  cycleSteps: false, 
  // Enable the back button support
  backButtonSupport: true, 
  // Enable selection of the step based on url hash
  useURLhash: true, 
  // Show url hash based on step 
  showStepURLhash: true, 
  // Language variables
  lang: {  
      next: 'Next', 
      previous: 'Previous'
  // step bar options
  toolbarSettings: {
    toolbarPosition: 'bottom', // none, top, bottom, both
    toolbarButtonPosition: 'right', // left, right
    showNextButton: true, // show/hide a Next button
    showPreviousButton: true, // show/hide a Previous button
    toolbarExtraButtons: []
  // anchor options
  anchorSettings: {
    anchorClickable: true, // Enable/Disable anchor navigation
    enableAllAnchors: false, // Activates all anchors clickable all times
    markDoneStep: true, // add done css
    markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
    removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
    enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
  // content url, Enables Ajax content loading. can set as data data-content-url on anchor
  contentURL: null, 
  // Array of disabled Steps
  disabledSteps: [],    
  // Highlight step with errors
  errorSteps: [],    
  // Hidden steps
  hiddenSteps: [], 
  // theme
  theme: 'default',
  // Effect on navigation, none/slide/fade
  transitionEffect: 'none', 
  // transition speed in ms
  transitionSpeed: '400'

7. Events.

// Triggers when leaving a step.
$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber) {
  return confirm("Do you want to leave the step "+stepNumber+"?");
// Triggers when showing a step.
$("#smartwizard").on("showStep", function(e, anchorObject, stepNumber) {
  alert("You are on step "+stepNumber+" now");

Change log:

v4.3.1 (2018-03-12)

  • Bootstrap 4 support, bug fixes and improvements

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


  • Updated to version v4.0.5

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

  • Publication date: 12.03.2018
  • Source