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 latest changes check out https://bs-stepper.netlify.com/
Features:
.fade
# npm
npm install bs-stepper --save
# yarn
yarn add bs-stepper
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 |
Include the CSS file:
<link rel="stylesheet" href="bs-stepper.min.css">
Add the following HTML:
<div class="bs-stepper">
<div class="bs-stepper-header" role="tablist">
<!-- your steps here -->
<div class="step" data-target="#logins-part">
<button type="button" class="step-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label">Logins</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#information-part">
<button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label">Various information</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<!-- your steps content here -->
<div id="logins-part" class="content" role="tabpanel" aria-labelledby="logins-part-trigger"></div>
<div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger"></div>
</div>
</div>
fade
animation, add the .fade
class on your .content
and set animation
to true
..vertical
class on your stepper. All steppers will switch to vertical on small viewports.Include the script before the end of the <body>
HTML tag:
<script src="bs-stepper.min.js"></script>
Or with npm
import Stepper from 'bs-stepper'
You should wait for the document ready event and create a new instance of Stepper
.
Vanilla JS
document.addEventListener('DOMContentLoaded', function () {
var stepper = new Stepper(document.querySelector('.bs-stepper'))
})
With jQuery
$(document).ready(function () {
var stepper = new Stepper($('.bs-stepper')[0])
})
For more examples check out this file.
This library is UMD-ready so you can use it everywhere.
Create an instance of Stepper
, accepts two parameters.
element
DOMElement
Pass your Stepper
DOMElement
options
(optional)
Object
default value:
{
linear: true,
animation: false,
selectors: {
steps: '.step',
trigger: '.step-trigger',
stepper: '.bs-stepper'
}
}
Allows you to customize the stepper selectors and its behavior.
Will navigate to the next step of your stepper. This method also emits the show.bs-stepper
event before showing the step and the shown.bs-stepper
even when the step is displayed.
var stepper = new Stepper(document.querySelector('.bs-stepper'))
stepper.next()
Will navigate to the previous step of your stepper. This method also emits the show.bs-stepper
event before showing the step and the shown.bs-stepper
event when the step is displayed.
Will navigate to a step of your stepper. This method also emits the show.bs-stepper
event
before showing the step and the shown.bs-stepper
event when the step is displayed.
var stepper = new Stepper(document.querySelector('.bs-stepper'))
/// Will navigate to the second step
stepper.to(2)
Will reset your stepper to the first step (useful for linear stepper). This method also emits
the show.bs-stepper
before showing the step and the shown.bs-stepper
event when the step is displayed.
Remove stored data related to your stepper and listeners.
The methods which triggers a step change trigger two events:
show.bs-stepper
shown.bs-stepper
You can listen on those events like this:
var stepperEl = document.getElementById('stepper')
var stepper = new Stepper(stepperEl)
stepperEl.addEventListener('show.bs-stepper', function (event) {
// You can call preventDefault to stop the rendering of your step
// event.preventDefault()
console.warn(event.detail.indexStep)
})
stepperEl.addEventListener('shown.bs-stepper', function (event) {
console.warn('step shown')
})
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.
bsStepper is compatible with:
You can find our BrowserStack list of browsers here.
If you want to thank me or support my work:
Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!