bs-stepper
A stepper plugin for Bootstrap 4.
You can use it on React and Angular too because this plugin is written with the most used JavaScript framework: VanillaJS.
If you want to see our last changes it's here: https://bs-stepper.netlify.com/
Features:
- Linear stepper
- Non linear stepper
- Fade effect with
.fade
- Vertical stepper
- Works with Bootstrap 4
- Accessible
- Works without dependencies (so no jQuery needed)
- Built in UMD to be used everywhere
- Small, only 2kb
Table of contents
Install
With npm or yarn
// npmnpm install bs-stepper --save // yarnyarn add bs-stepper
CDN
CDN | Link |
---|---|
jsDelivr, js minified | https://cdn.jsdelivr.net/npm/bs-stepper/dist/js/bs-stepper.min.js |
jsDelivr, css minified | https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css |
How to use it
HTML markup
Include the CSS file:
Add the following HTML:
<!-- your steps here --> 1 Logins 2 Various information <!-- your steps content here -->
- If you want to use the fade
fade
animation, add.fade
class on your.content
and setanimation
totrue
. - To create a vertical stepper, just add
.vertical
class on your stepper. All steppers will switch to vertical on small viewports.
JavaScript
In HTML before the end of the <body>
tag
Or with npm
Create a stepper
You should wait for the document ready event and create a new instance of Stepper
.
Vanilla JS
document
With jQuery
For more examples check out this file.
This library is UMD ready so you can use it everywhere.
Methods
constructor
Create an instance of Stepper
, accept two parameters.
Parameters
element
- type:
DOMElement
Pass your Stepper
DOMElement
-
options
(optional)- type:
Object
default value:
linear: trueanimation: falseselectors:steps: '.step'trigger: '.step-trigger'stepper: '.bs-stepper'Allows you to customize the stepper selectors and it's behaviour.
- type:
next
Will navigate to the next step of your stepper. This method also emit show.bs-stepper
before showing the step and
shown.bs-stepper
when the step is displayed.
var stepper = documentsteppernext
previous
Will navigate to the previous step of your stepper. This method also emit show.bs-stepper
before showing the step and
shown.bs-stepper
when the step is displayed.
to
Will navigate to a step of your stepper. This method also emit show.bs-stepper
before showing the step and
shown.bs-stepper
when the step is displayed.
var stepper = document /// Will navigate to the second stepstepper
reset
Will reset you stepper to the first step (usefull for linear stepper). This method also emit show.bs-stepper
before showing the step and
shown.bs-stepper
when the step is displayed.
destroy
Remove stored data relative to your stepper and listeners.
Events
The methods which trigger a step change trigger two events:
show.bs-stepper
shown.bs-stepper
You can listen on those events like that:
var stepperEl = documentvar stepper = stepperEl stepperEl stepperEl
The event detail
object contains the following properties:
{
indexStep: contains the id of the step which will be displayed,
to: alias of indexStep,
from: previous step id (or current step id)
}
If you need to prevent the display of a step, you have to call preventDefault
on the show.bs-stepper
listener.
Compatibility
bsStepper is compatible with:
- IE10+
- Edge
- Firefox
- Chrome
- Safari
- Chrome Android
- Safari iOS
You can find our BrowserStack list of browsers here.
Support me
If you want to thank me or supporting my work:
Thanks
Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!