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