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 and jQuery
- Built in UMD to be used everywhere
- Small, only 2kb and less if you gzip it
Table of contents
Install
With npm or yarn
// npm
npm install bs-stepper --save
// yarn
yarn 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:
<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="btn btn-link 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="btn btn-link 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>
- 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
<script src="bs-stepper.min.js"></script>
Or with npm
import Stepper from 'bs-stepper'
Create a 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.
Methods
constructor
Create an instance of Stepper
, accept two parameters.
Parameters
element
- type:
DOMElement
Pass your Stepper
DOMElement
-
options
(optional)- default value:
{ linear: true, animation: false }
- type:
Object
Allows you to choose if you want a linear stepper or not and if you want to animate when the content will be displayed.
- default value:
next
Will navigate to the next step of your stepper
var stepper = new Stepper(document.querySelector('.bs-stepper'))
stepper.next()
previous
Will navigate to the previous step of your stepper
to
Will navigate to a step of your stepper.
var stepper = new Stepper(document.querySelector('.bs-stepper'))
/// Will navigate to the second step
stepper.to(2)
reset
Will reset you stepper to the first step (usefull for linear stepper)
destroy
Remove stored data relative to your stepper and listeners.
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, you can support me and become my Patron
Thanks
Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!