"progression"
Bootstrap 4.1.1 Snippet by abhijeetka

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="progression progress-step-patient_infos"><span class="progress-line"></span><span class="progress-line-full"></span><ul><li class="active"><span class="dot"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.31 6.4L9 12.56l-2.38-2.5A.9.9 0 0 0 5.29 10a.98.98 0 0 0-.04 1.36s2.9 3.13 3.31 3.44a.91.91 0 0 0 1.3-.2l4.96-7.08a.99.99 0 0 0-.2-1.34.91.91 0 0 0-1.3.2z"></path>
</svg>
</span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Choice of the reason</font></font></li><li class="active"><span class="dot"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.31 6.4L9 12.56l-2.38-2.5A.9.9 0 0 0 5.29 10a.98.98 0 0 0-.04 1.36s2.9 3.13 3.31 3.44a.91.91 0 0 0 1.3-.2l4.96-7.08a.99.99 0 0 0-.2-1.34.91.91 0 0 0-1.3.2z"></path>
</svg>
</span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Identification</font></font></li><li class="active"><span class="dot"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M13.31 6.4L9 12.56l-2.38-2.5A.9.9 0 0 0 5.29 10a.98.98 0 0 0-.04 1.36s2.9 3.13 3.31 3.44a.91.91 0 0 0 1.3-.2l4.96-7.08a.99.99 0 0 0-.2-1.34.91.91 0 0 0-1.3.2z"></path>
</svg>
</span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Verification</font></font></li><li class="active"><span class="dot"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">4</font></font></span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> Patient Info</font></font></li><li><span class="dot"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">5</font></font></span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> It's over</font></font></li></ul></div>
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
.progression {
position: relative;
padding-top: 20px;
margin-bottom: 40px;
text-align: center;
font-size: 14px;
}
.progression .progress-line, .progression .progress-line-full {
position: absolute;
width: 100%;
height: 2px;
left: 0;
top: 35px;
background-color: rgba(67,95,113,0.2);
}
.progress-step-patient_infos .progress-line-full {
width: 62.5%;
}
.progression .progress-line-full {
background-color: #0596de;
}
.progression ul {
list-style-type: none;
display: inline-block;
width: 64%;
margin: 0 auto;
padding: 0;
}
.progression ul li.active {
color: inherit;
}
.progression ul li {
display: inline-block;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

BLK• Design System

Questions / Comments: