Create Step By Step Progress Form in Bootstrap

Today I am going to share simple javascript bootstrap based Step By Step Progress Form. 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. You can use it on React and Angular too because this plugin is written with the most used JavaScript framework: VanillaJS.
bootstrap-multi-step-form
Features:

  • Linear stepper
  • Non linear stepper
  • Fade effect with .fade
  • Works with Bootstrap 4
  • Works without dependencies and jQuery
  • Built in UMD to be used everywhere
  • Small, only 2kb and less if you gzip it



Libraries

Include following libraries on page.

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

CSS

create a basic stepper containing 3 steps and next/prev buttons.

<div class="bs-stepper">
  <div class="bs-stepper-header">
    <!-- your steps here -->
    <div class="step" data-target="#logins-part">
      <a href="#">
        <span class="bs-stepper-circle">1</span>
        <span class="bs-stepper-label">Logins</span>
      </a>
    </div>
    <div class="line"></div>
    <div class="step" data-target="#information-part">
      <a href="#">
        <span class="bs-stepper-circle">2</span>
        <span class="bs-stepper-label">Various information</span>
      </a>
    </div>
  </div>
  <div class="bs-stepper-content">
    <!-- your steps content here -->
    <div id="logins-part" class="content"></div>
    <div id="information-part" class="content"></div>
  </div>
</div>



JS

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

If you want to add a fade animation, add .fade and .d-none classes on your .content.

document.addEventListener('DOMContentLoaded', function () {
  var stepper = new Stepper(document.querySelector('.bs-stepper'))
})

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by Johann-S. Visit their official github repository for more information and follow for future updates.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.