Create Step By Step Progress In Bootstrap 4 - bs-stepper

Create Step By Step Progress In Bootstrap 4 - bs-stepper

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.

1. Install the bs-stepper plugin.

# NPM
$ npm install bs-stepper --save

2. Import the bs-stepper.

import Stepper from 'bs-stepper'

3. Or include the bs-stepper's files from a CDN.

<link rel="stylesheet" href="https://unpkg.com/bs-stepper/dist/css/bs-stepper.min.css">
<script src="https://unpkg.com/bs-stepper/dist/js/bs-stepper.min.js"></script>

4. The HTML structure to create a basic stepper containing 3 steps and next/prev buttons.

<div id="stepper-example" class="bs-stepper">
  <div class="bs-stepper-header">
    <div class="step" data-target="#test-l-1">
      <a href="#">
        <span class="bs-stepper-circle">1</span>
        <span class="bs-stepper-label">First step</span>
      </a>
    </div>
    <div class="line"></div>
    <div class="step" data-target="#test-l-2">
      <a href="#">
        <span class="bs-stepper-circle">2</span>
        <span class="bs-stepper-label">Second step</span>
      </a>
    </div>
    <div class="line"></div>
    <div class="step" data-target="#test-l-3">
      <a href="#">
        <span class="bs-stepper-circle">3</span>
        <span class="bs-stepper-label">Third step</span>
      </a>
    </div>
  </div>
  <div class="bs-stepper-content">
    <div id="test-l-1" class="content">
      <p class="text-center">test 1</p>
      <button class="btn btn-primary" onclick="myStepper.next()">Next</button>
    </div>
    <div id="test-l-2" class="content">
      <p class="text-center">test 2</p>
      <button class="btn btn-primary" onclick="myStepper.next()">Next</button>
    </div>
    <div id="test-l-3" class="content">
      <p class="text-center">test 3</p>
      <button class="btn btn-primary" onclick="myStepper.next()">Next</button>
      <button class="btn btn-primary" onclick="myStepper.previous()">Previous</button>
    </div>
  </div>
</div>

5. Initialize the stepper by calling the function on the top container.

// Vanilla JavaScript
document.addEventListener('DOMContentLoaded', function () {
  myStepper = new Stepper(document.querySelector('#stepper-example'))
})
// As a jQuery Plugin
$(document).ready(function () {
  var myStepper = new Stepper($('#stepper-example'))
})

6. To create a non-linear stepper where the users are able to back to the previous step:

myStepper = new Stepper(document.querySelector('#stepper-example'),{
  linear: false
})

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

  • Publication date: 14.10.2018
  • Source