<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="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>

.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; vertical-align: top; position: relative; width: 20%; height: 60px; padding-top: 40px; text-align: center; color: #435f71; } .progression ul li.active .dot { background-color: #0596de; border-color: #0596de; } .progression ul li .dot { position: absolute; display: block; width: 30px; height: 30px; left: 50%; top: 0; margin-left: -15px; background-color: #fff; border: 2px solid rgba(67,95,113,0.2); border-radius: 30px; color: white; padding: 3px; } .progression svg { fill: #fff; } svg:not(:root) { overflow: hidden; }