bs-stepper
Advanced tools
Changelog
Readme
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:
.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 .fade class on your .content and set animation to true..vertical class on your stepper. All steppers will switch to vertical on small viewports.In HTML before the end of the <body> 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, accept two parameters.
elementDOMElementPass your Stepper DOMElement
options (optional)
Objectdefault value:
{
linear: true,
animation: false,
selectors: {
steps: '.step',
trigger: '.step-trigger',
stepper: '.bs-stepper'
}
}
Allows you to customize the stepper selectors and it's behaviour.
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 = new Stepper(document.querySelector('.bs-stepper'))
stepper.next()
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.
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 = new Stepper(document.querySelector('.bs-stepper'))
/// Will navigate to the second step
stepper.to(2)
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.
Remove stored data relative to your stepper and listeners.
The methods which trigger a step change trigger two events:
show.bs-steppershown.bs-stepperYou can listen on those events like that:
var stepperEl = document.getElementById('stepper')
var stepper = new Stepper(stepperEl)
stepperEl.addEventListener('show.bs-stepper', function (event) {
// You can call prevent 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 supporting my work:
Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!
FAQs
A stepper for Bootstrap 4
The npm package bs-stepper receives a total of 23,654 weekly downloads. As such, bs-stepper popularity was classified as popular.
We found that bs-stepper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.