Bootstrap 4 step by step progress wizard

Create Step By Step Progress In Bootstrap 4 with bs-stepper. A very good solution for various purposes, such as forms, guides, installations.

Step by step progress wizard with Bootstrap 4

Bs-stepper is a lightweight stepper JavaScript plugin for Bootstrap 4 that helps you create wizard-style step-by-step progresses for forms, guides, and installations.

Main features:

– Linear stepper
– Non linear stepper
– Accessible
– Fade effect with .fade
– Vertical stepper
– Works with Bootstrap
– Works without dependencies (so no jQuery needed)
– Built in UMD to be used everywhere
– Small, only 2kb

Bootstrap 4 and JS stepper UI
Bootstrap 4 and JS stepper UI

Setup

# npm
npm install bs-stepper --save

# yarn
yarn add bs-stepper

Sample

HTML

<div class="bs-stepper">
  <div class="bs-stepper-header" role="tablist">
    <!-- your steps here -->
    <div class="step" data-target="#logins-part">
      <button type="button" class="step-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger">
        <span class="bs-stepper-circle">1</span>
        <span class="bs-stepper-label">Logins</span>
      </button>
    </div>
    <div class="line"></div>
    <div class="step" data-target="#information-part">
      <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
        <span class="bs-stepper-circle">2</span>
        <span class="bs-stepper-label">Various information</span>
      </button>
    </div>
  </div>
  <div class="bs-stepper-content">
    <!-- your steps content here -->
    <div id="logins-part" class="content" role="tabpanel" aria-labelledby="logins-part-trigger"></div>
    <div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger"></div>
  </div>
</div>

In HTML before the end of the ‘body’ tag:

<script src="bs-stepper.min.js"></script>
// Vanilla JS
document.addEventListener('DOMContentLoaded', function () {
  var stepper = new Stepper(document.querySelector('.bs-stepper'));
});

// With jQuery
$(document).ready(function () {
  var stepper = new Stepper($('.bs-stepper')[0]);
})

Events


// You can listen on those events like that:
var stepperEl = document.getElementById('stepper')
var stepper = new Stepper(stepperEl)

stepperEl.addEventListener('show.bs-stepper', function (event) {
  // You can call prevent to stop the rendering of your step
  // event.preventDefault()
  console.warn(event.detail.indexStep)
})

stepperEl.addEventListener('shown.bs-stepper', function (event) {
  console.warn('step shown')
})

Cross-browser solution! BsStepper is compatible with: IE10+, Edge, Firefox, Chrome, Safari, Chrome Android, Safari iOS.

License: MIT

Homepage

https://johann-s.github.io/bs-stepper

GitHub

https://github.com/Johann-S/bs-stepper

scraperapi

See also

Multi-step jQuery form wizard plugin – jquery.steps

Smart Wizard – a jQuery form wizard plugin

jQuery and Bootstrap tour

Enjoy step by step progress implementation with Bootstrap 4.