Atmos
Search…
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
1
<script src="assets/vendor/jquery.bootstrap.wizard/jquery.bootstrap.wizard.min.js"></script>
Copied!

Step 2

Prepare the Markup
1
<div id="rootwizard">
2
3
<ul class="nav nav-pills nav-justified">
4
<li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">Verify
5
Identity</a></li>
6
<li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Select
7
Plans</a></li>
8
<li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">
9
Delights</a></li>
10
</ul>
11
12
<div class="tab-content">
13
<div class="tab-pane p-t-20 p-b-20" id="tab1">
14
15
<h3>
16
<span class="align-middle">Welcome Fella,</span></h3>
17
<div class="form-group">
18
<label for="exampleInputEmail1">Email address</label>
19
<input type="email" class="form-control" id="exampleInputEmail1"
20
aria-describedby="emailHelp" placeholder="Enter email">
21
<small id="emailHelp" class="form-text text-muted">We'll never
22
share your email with anyone else.
23
</small>
24
</div>
25
<div class="form-group">
26
<label for="exampleInputPassword1">Password</label>
27
<input type="password" class="form-control"
28
id="exampleInputPassword1" placeholder="Password">
29
</div>
30
31
<div class="custom-control custom-checkbox">
32
<input checked type="checkbox" class="custom-control-input"
33
id="customCheck1">
34
<label class="custom-control-label" for="customCheck1">Agree to
35
the terms and conditions.</label>
36
</div>
37
38
39
</div>
40
<div class="tab-pane p-t-20 p-b-20" id="tab2">
41
<div class="radio-box">
42
<input id="radio-new1" name="bigradios" type="radio">
43
<label for="radio-new1">
44
<div class="radio-content">
45
<h6>Starter Plan <span class="badge-soft-primary badge">$12 MONTH</span>
46
</h6>
47
<p class="text-muted">
48
description
49
</p>
50
</div>
51
</label>
52
</div>
53
<div class="radio-box">
54
<input id="radio-new2" name="bigradios" type="radio">
55
<label for="radio-new2">
56
<div class="radio-content">
57
<h6>Pro Plan <span class="badge-soft-info badge">$49 MONTH</span>
58
</h6>
59
60
<p class="text-muted">
61
description
62
</p>
63
</div>
64
</label>
65
</div>
66
67
</div>
68
<div class="tab-pane p-t-20 p-b-20" id="tab3">
69
<div class="row">
70
<div class="col m-b-30">
71
<div class="radio-box-column">
72
<input id="radio-column-1" name="column-radio"
73
type="radio">
74
<label for="radio-column-1">
75
<div class="radio-content ">
76
<div class="p-all-15">
77
<div class="m-b-20">
78
<img src="assets/img/cake.png" alt="">
79
</div>
80
<ul class="list-group">
81
<li class="list-group-item">2 Cups of
82
Icecream Daily
83
</li>
84
<li class="list-group-item">1 Surprise
85
Cake
86
</li>
87
88
</ul>
89
</div>
90
91
<div class="radio-highlight ">
92
Cup Cakes
93
</div>
94
</div>
95
</label>
96
</div>
97
</div>
98
<div class="col m-b-30">
99
<div class="radio-box-column">
100
<input id="radio-column-2" name="column-radio"
101
type="radio">
102
<label for="radio-column-2">
103
<div class="radio-content ">
104
<div class="p-all-15">
105
<div class="m-b-20">
106
<img src="assets/img/iceccream-bowl.png"
107
alt="">
108
</div>
109
<ul class="list-group">
110
<li class="list-group-item">1 Cups of
111
Icecream Daily
112
</li>
113
<li class="list-group-item">5 Surprise
114
Cakes
115
</li>
116
117
</ul>
118
</div>
119
120
<div class="radio-highlight ">
121
Ice Cream
122
</div>
123
</div>
124
</label>
125
</div>
126
</div>
127
128
</div>
129
</div>
130
<ul class="nav nav-pills justify-content-between wizard m-b-30">
131
<li class=" nav-item next"><a class="nav-link btn-success"
132
href="#!">Proceed</a></li>
133
134
135
</ul>
136
</div>
137
</div>
Copied!

Step 3

Initialize the plugin
1
$('#rootwizard').bootstrapWizard({
2
'tabClass': 'nav nav-pills',
3
'onNext': function (tab, navigation, index) {
4
5
},
6
7
});
Copied!
Twitter Bootstrap Wizard
Last modified 2yr ago
Copy link