This time I will share jQuery Plugin and tutorial about Create Step By Step Progress In Bootstrap 4 – bs-stepper, hope it will help you in programming stack.
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.
How to use it:
1. Install the bs-stepper plugin.
2 |
$ npm install bs-stepper --save |
2. Import the bs-stepper.
1 |
import Stepper from 'bs-stepper' |
3. Or include the bs-stepper’s files from a CDN.
4. The HTML structure to create a basic stepper containing 3 steps and next/prev buttons.
01 |
<div id="stepper-example" class="bs-stepper"> |
02 |
<div class="bs-stepper-header"> |
03 |
<div class="step" data-target="#test-l-1"> |
05 |
<span class="bs-stepper-circle">1</span> |
06 |
<span class="bs-stepper-label">First step</span> |
09 |
<div class="line"></div> |
10 |
<div class="step" data-target="#test-l-2"> |
12 |
<span class="bs-stepper-circle">2</span> |
13 |
<span class="bs-stepper-label">Second step</span> |
16 |
<div class="line"></div> |
17 |
<div class="step" data-target="#test-l-3"> |
19 |
<span class="bs-stepper-circle">3</span> |
20 |
<span class="bs-stepper-label">Third step</span> |
24 |
<div class="bs-stepper-content"> |
25 |
<div id="test-l-1" class="content"> |
26 |
<p class="text-center">test 1</p> |
27 |
<button class="btn btn-primary" onclick="myStepper.next()">Next</button> |
29 |
<div id="test-l-2" class="content"> |
30 |
<p class="text-center">test 2</p> |
31 |
<button class="btn btn-primary" onclick="myStepper.next()">Next</button> |
33 |
<div id="test-l-3" class="content"> |
34 |
<p class="text-center">test 3</p> |
35 |
<button class="btn btn-primary" onclick="myStepper.next()">Next</button> |
36 |
<button class="btn btn-primary" onclick="myStepper.previous()">Previous</button> |
5. Initialize the stepper by calling the function on the top container.
2 |
document.addEventListener('DOMContentLoaded', function () { |
3 |
myStepper = new Stepper(document.querySelector('#stepper-example')) |
7 |
$(document).ready(function () { |
8 |
var myStepper = new Stepper($('#stepper-example')) |
6. To create a non-linear stepper where the users are able to back to the previous step:
1 |
myStepper = new Stepper(document.querySelector('#stepper-example'),{ |
7. Enable/disable the fade animation:
1 |
myStepper = new Stepper(document.querySelector('#stepper-example'),{ |
8. To create a vertical stepper, just add the vertical class to the top container.
1 |
<div id="example" class="bs-stepper vertical"> |
Changelog:
v1.7.0 (2019-07-24)
- Bugfix
- Add from and to properties in events detail
v1.6.0/v1.6.1 (2019-06-19)
- Allows you to customize stepper internal css classes
- Bugfixes
v1.5.0 (2019-03-22)
- events: dispatch show events (show and shown)
v1.4.1 (2019-03-22)
- selector: remove a selector
- selector: simple tags won’t trigger step change, you have to use .step-trigger to allow that
- feat(events): dispatch show events (show and shown)
v1.3.0 (2019-02-25)
- feat(core): rewrite css smartly
v1.3.0 (2019-02-05)
v1.2.0 (2018-10-22)
- feat(core): add vertical stepper
2018-10-16
- add fade effect
- add d-none by default for fade steppers
- fix code style
This awesome jQuery plugin is developed by Johann-S. For more Advanced Usages, please check the demo page or visit the official website.
