Form Wizard
Bootstrap Wizard plugin to build a wizard out of a formatter tabable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.
Step 1
Add JavaScript file before enclosure of body tag
<script src="assets/vendor/jquery.bootstrap.wizard/jquery.bootstrap.wizard.min.js"></script>Step 2
Prepare the Markup
<div id="rootwizard">
<ul class="nav nav-pills nav-justified">
<li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">Verify
Identity</a></li>
<li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Select
Plans</a></li>
<li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">
Delights</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane p-t-20 p-b-20" id="tab1">
<h3>
<span class="align-middle">Welcome Fella,</span></h3>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never
share your email with anyone else.
</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control"
id="exampleInputPassword1" placeholder="Password">
</div>
<div class="custom-control custom-checkbox">
<input checked type="checkbox" class="custom-control-input"
id="customCheck1">
<label class="custom-control-label" for="customCheck1">Agree to
the terms and conditions.</label>
</div>
</div>
<div class="tab-pane p-t-20 p-b-20" id="tab2">
<div class="radio-box">
<input id="radio-new1" name="bigradios" type="radio">
<label for="radio-new1">
<div class="radio-content">
<h6>Starter Plan <span class="badge-soft-primary badge">$12 MONTH</span>
</h6>
<p class="text-muted">
description
</p>
</div>
</label>
</div>
<div class="radio-box">
<input id="radio-new2" name="bigradios" type="radio">
<label for="radio-new2">
<div class="radio-content">
<h6>Pro Plan <span class="badge-soft-info badge">$49 MONTH</span>
</h6>
<p class="text-muted">
description
</p>
</div>
</label>
</div>
</div>
<div class="tab-pane p-t-20 p-b-20" id="tab3">
<div class="row">
<div class="col m-b-30">
<div class="radio-box-column">
<input id="radio-column-1" name="column-radio"
type="radio">
<label for="radio-column-1">
<div class="radio-content ">
<div class="p-all-15">
<div class="m-b-20">
<img src="assets/img/cake.png" alt="">
</div>
<ul class="list-group">
<li class="list-group-item">2 Cups of
Icecream Daily
</li>
<li class="list-group-item">1 Surprise
Cake
</li>
</ul>
</div>
<div class="radio-highlight ">
Cup Cakes
</div>
</div>
</label>
</div>
</div>
<div class="col m-b-30">
<div class="radio-box-column">
<input id="radio-column-2" name="column-radio"
type="radio">
<label for="radio-column-2">
<div class="radio-content ">
<div class="p-all-15">
<div class="m-b-20">
<img src="assets/img/iceccream-bowl.png"
alt="">
</div>
<ul class="list-group">
<li class="list-group-item">1 Cups of
Icecream Daily
</li>
<li class="list-group-item">5 Surprise
Cakes
</li>
</ul>
</div>
<div class="radio-highlight ">
Ice Cream
</div>
</div>
</label>
</div>
</div>
</div>
</div>
<ul class="nav nav-pills justify-content-between wizard m-b-30">
<li class=" nav-item next"><a class="nav-link btn-success"
href="#!">Proceed</a></li>
</ul>
</div>
</div>Step 3
Initialize the plugin
$('#rootwizard').bootstrapWizard({
'tabClass': 'nav nav-pills',
'onNext': function (tab, navigation, index) {
},
});Last updated