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.
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.
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.
This awesome plugin is developed by Johann-S. Visit their official github repository for more information and follow for future updates.
