Create Step By Step Progress Form in Bootstrap

by

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.

CSS

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


  

    
    

      
        1
        Logins
      
    

    

    

      
        2
        Various information



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.


Published by Rohit