"Form-wizard"
Bootstrap 3.3.0 Snippet by resha13

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="stepwizard">
<div class="stepwizard-row">
<div class="stepwizard-step">
<a class="btn btn-default btn-circle active-step" href="#step-1" data-toggle="tab" onclick="stepnext(1)" >1</a>
<p>Seller Details</p>
</div>
<div class="stepwizard-step">
<a class="btn btn-default btn-circle" disabled="disabled" href="#step-2" data-toggle="tab">2</a>
<p>Company Document</p>
</div>
<div class="stepwizard-step">
<a class="btn btn-default btn-circle" disabled="disabled" href="#step-3" data-toggle="tab">3</a>
<p>Bank Details</p>
</div>
</div>
<div class="rate-updates">
<div class="tab-content" style="border:none !important;">
<div class="tab-pane fade active in" id="step-1">
<div class="row">
<div class="form-group">
<table class="table table-striped">
<tr>
<th style="float: right;">Contact Person</th>
<td><input type="text" maxlength="10" required="required" class="form-control"></td>
<th style="float: right;">Mobile No. </th>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function stepnext(n){
if(n != 0){
//$(".stepwizard-row a").switchClass('btn-primary','btn-default');
$(".stepwizard-row a").removeClass('btn-primary');
$(".stepwizard-row a").addClass('btn-default');
$('.stepwizard a[href="#step-'+n+'"]').tab('show');
//$('.stepwizard-row a[href="#step-'+n+'"]').switchClass('btn-default','btn-primary');
$('.stepwizard-row a[href="#step-'+n+'"]').removeClass('btn-default');
$('.stepwizard-row a[href="#step-'+n+'"]').addClass('btn-primary');
}
}
stepnext(1);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit React
login-form
Login Form
Contact Form

Questions / Comments: