"workflow"
Bootstrap 4.1.1 Snippet by Pawan Pandey

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<!---------------Platform Tour----------------->
<div class="platform-tour-wrapper py-3">
<!-- Nav tabs -->
<ul class="nav nav-tabs justify-content-between border-0 horizontal-tabs-steps">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#step1"><span>1</span>
</a>
<h6 class="text-center mt-1">Step 1</h6>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#step2"><span>2</span></a>
<h6 class="text-center mt-1">Step 2</h6>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#step3"><span>3</span></a>
<h6 class="text-center mt-1">Step 3</h6>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#step4"><span>4</span></a>
<h6 class="text-center mt-1">Step 4</h6>
</li>
<li class="nav-item">
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
/*********** Steps Start***************/
.horizontal-tabs-steps {
position: relative;
}
.horizontal-tabs-steps .nav-item {
z-index: 1;
position: relative;
}
.horizontal-tabs-steps .nav-item:after {
content: "";
border-top: 5px dotted #73b6ff;
position: absolute;
z-index: 0;
top: 12px;
width: 265px;
left: 0px;
transition: border 1s ease-out;
transition-delay: 0s, 0s, 0.1s;
}
.horizontal-tabs-steps .nav-item:last-child:after {
content: "";
border-top: 0px dotted #4da3ff;
}
.horizontal-tabs-steps .nav-item.complete-step:after {
content: "";
border-top: 5px dotted #4d7ed2;
position: absolute;
z-index: 0;
top: 12px;
width: 265px;
left: 0px;
transition: border 1s ease-out;
transition-delay: 0s, 0s, 0.1s
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
$(".vertical-tabs-steps .nav-link, .horizontal-tabs-steps .nav-link").click(function() {
$(this).parent().prevAll().children('.vertical-tabs-steps .nav-link, .horizontal-tabs-steps .nav-link').addClass('checked-steps');
$(this).parent().nextAll().children('.vertical-tabs-steps .nav-link, .horizontal-tabs-steps .nav-link').removeClass('checked-steps');
$(this).removeClass('checked-steps');
$(this).parent().removeClass('complete-step');
$(this).parent().nextAll().removeClass('complete-step');
$(".horizontal-tabs-steps .nav-link.checked-steps, .vertical-tabs-steps .nav-link.checked-steps").parent().addClass('complete-step');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Awesome Landing Page

Questions / Comments: