Bootstrap Stpper
<link href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href=" https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bs-stepper/dist/js/bs-stepper.min.js"></script>
<div id="stepper1" class="bs-stepper linear">
<div class="bs-stepper-header" role="tablist">
<div class="step active" data-target="#test-l-1">
<button type="button" class="step-trigger" role="tab" id="stepper1trigger1" aria-controls="test-l-1" aria-selected="true">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label">Email</span>
</button>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#test-l-2">
<button type="button" class="step-trigger" role="tab" id="stepper1trigger2" aria-controls="test-l-2" aria-selected="false" disabled="disabled">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label">Password</span>
</button>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#test-l-3">
<button type="button" class="step-trigger" role="tab" id="stepper1trigger3" aria-controls="test-l-3" aria-selected="false" disabled="disabled">
<span class="bs-stepper-circle">3</span>
<span class="bs-stepper-label">Validate</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onsubmit="return false">
<div id="test-l-1" role="tabpanel" class="bs-stepper-pane active dstepper-block" aria-labelledby="stepper1trigger1">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<button class="btn btn-primary" onclick="stepper1.next()">Next</button>
</div>
<div id="test-l-2" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper1trigger2">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button class="btn btn-primary" onclick="stepper1.previous()">Previous</button>
<button class="btn btn-primary" onclick="stepper1.next()">Next</button>
</div>
<div id="test-l-3" role="tabpanel" class="bs-stepper-pane text-center" aria-labelledby="stepper1trigger3">
<button class="btn btn-primary mt-5" onclick="stepper1.previous()">Previous</button>
<button type="submit" class="btn btn-primary mt-5">Submit</button>
</div>
</form>
</div>
</div>
feature
- Support stepper with tab content
- Support click event
- Support active setp
- Non linear stepper
- Fade effect with .fade
- Vertical stepper
- Works with Bootstrap 4
- Accessible
- Works without dependencies (so no jQuery needed)
- Built in UMD so it can be used everywhere
- Small, only 2kb
CDN
Demo Url https://johann-s.github.io/bs-stepper/
GitHub:https://github.com/Johann-S/bs-stepper

Loading...