Press "Enter" to skip to content

A Wizard-Style Plugin With a Series of Customizable Steps | MultiStep

MultiStep is a multi-step processor plugin that dynamically creates and displays a multi-step processor in a popup based on Bootstrap’s Modal.

multi step form bootstrap, bootstrap 4 multi step form wizard, step wizard bootstrap, bootstrap 3 step wizard example, bootstrap step wizard with progress bar, bootstrap 4 multi step form wizard with validation

How to make use of it:

1. Load the mandatory JavaScript and CSS files in your Bootstrap challenge.

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

<!-- MultiStep stylesheet -->
<link rel="stylesheet" href="dist/css/MultiStep.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="dist/css/MultiStep-theme.min.css">

<!-- jQuery -->
<script src="jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="bootstrap.min.js"></script>

<!-- MultiStep JS -->
<script src="dist/js/MultiStep.min.js"></script>

2. Create an empty DIV container for the modal wizard.

<div id="submitModal" class="multi-step">

3. Create a trigger button to launch the modal wizard.

<button class="btn btn-primary" data-toggle="modal" data-target="#submitModal">Launch</button>

4. Define your individual steps in an array of JS objects as follows:

const mySteps = [{
        content: 'Hello World!',
        label: 'Custom label'
        content: 'This is a multi-step modal'
        content: 'You can have skip options',
        content: '<small>You can include html content as well!</small><br><br>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        skip: true
        content: 'This is the end<br>Hold your breath and count to ten',

5. Initialize the modal wizard and accomplished it.

  data: mySteps

6. Customize the message displayed within the remaining step.

  data: mySteps,
  final: 'Are you sure you want to confirm?',
  finalLabel: 'Complete'

7. Set the title of the modal wizard.

  data: mySteps,
  title: 'Your Title Here'

8. Set the modal size.

  data: mySteps,
  modalSize: 'md'

9. Customize the label text.

  data: mySteps,
  prevText: 'Previous',
  skipText: 'Skip',
  nextText: 'Next',
  finishText: 'Finish'

10. Callback features can be triggered on close.

  data: mySteps,
  onClose: function() {
  onDestroy: function($elem) {


static MultiStep.get(element: HTMLElement):
Static method that gets MultiStep object for already bound element

Add step in the wizard and returns the step object

MultiStep.getStep(stepNumber: number):
Returns the step object of given step number

MultiStep.updateOptions(newOptions: MultiStepOptions):
Updates the multiStep options

Reset step progress

Sets HTML content for a step object

Gets step number. Step number starts from 1.


Callback to notify when steps are completed

onNext(step: Step):
Callback to notify when next step is triggered. Provides step object as parameter

onPrev(step: Step):
Callback to notify when previous step is triggered. Provides step object as parameter

Label for next button. Default is ‘Next’

Label for previous button. Default is ‘Previous’

Label for complete button. Default is ‘Finish’

Multi-step Modal Wizard Plugin, MultiStep Github, vertical multi step form bootstrap 4, form wizard bootstrap 4

See Demo And Download

Official Website(Kinle): Click Here

This superior jQuery/javascript plugin is developed by Kinle. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.