"Untitled"
Bootstrap 3.3.0 Snippet by dimb

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row pt-4 mt-4">
<div class="col-sm-12">
<ul class="steps">
<li class="" data-step="1">
<span class="step">1</span>
</li>
<li class="active" data-step="2">
<span class="step">2</span>
</li>
<li class="" data-step="3">
<span class="step">3</span>
</li>
<li class="" data-step="4">
<span class="step stepdown">4<span class="down"><span class"ml-2">reverse</span></span></span>
</li>
</ul>
</div>
</div>
<div class="row" style="padding-top:20px">
<div class="col-sm-12">
<ul class="steps">
<li class="hiddenstep" data-step="1">
<span class="step">1</span>
</li>
<li class="hiddenstep" data-step="2">
<span class="step">2</span>
</li>
<li class="last-child-reverse" data-step="3">
<span class="step">3</span>
</li>
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 {
width: 100% !important;
}
.steps>li .step,.steps>li.complete .step:before{line-height:30px;background-color:#FFF;text-align:center}
.steps{list-style:none;display:table;width:100%;padding:0;margin:0;position:relative}
.steps>li{display:table-cell;text-align:center;width:1%}
.steps>li .step{border:5px solid #CED1D6;color:#546474;font-size:15px;border-radius:100%;position:relative;z-index:2;display:inline-block;width:40px;height:40px}
.steps>li:before{display:block;content:"";width:100%;height:1px;font-size:0;overflow:hidden;border-top:4px solid #CED1D6;position:relative;top:21px;z-index:1}
.steps>li.last-child:before{max-width:50%;width:50%}
.steps>li:last-child:before{max-width:50%;width:50%}
.steps>li:first-child:before{max-width:51%;left:50%}
.steps>li.active .step,.steps>li.active:before,.steps>li.complete .step,.steps>li.complete:before{border-color:#5293C4}
.steps>li.complete .step{cursor:default;color:#FFF;-webkit-transition:transform ease .1s;-o-transition:transform ease .1s;transition:transform ease .1s}
.steps>li.complete .step:before{display:block;position:absolute;top:0;left:0;bottom:0;right:0;border-radius:100%;content:"\f00c";z-index:3;font-family:FontAwesome;font-size:17px;color:#87BA21}
.step-content,.tree{position:relative}
.steps>li.complete:hover .step{-moz-transform:scale(1.1);-webkit-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);border-color:#80afd4}
.steps>li.complete:hover:before{border-color:#80afd4}
.steps>li .title{display:block;margin-top:4px;max-width:100%;color:#949EA7;font-size:14px;z-index:104;text-align:center;table-layout:fixed;word-wrap:break-word}
.steps>li.active .title,.steps>li.complete .title{color:#2B3D53}
.step-content .step-pane{display:none;min-height:200px;padding:4px 8px 12px}
.step-content .step-pane.active{display:block}
.steps>li .stepdown > span.down{
border-left:4px solid #CED1D6;
color:#546474;
font-size:15px;
z-index:2;
position: absolute;
height: 100%;
left: 13px;
top: 100%;
}
.steps>li.hiddenstep {
visibility: hidden;
}
.steps>li:before{
display:block;
content:"";
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit

Questions / Comments: