<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="container my-5"> <ul id="progressbar" class="text-center"> <li class="active" id="step1"> <div class="d-none d-md-block"> <span class="smallCr br_wt bg_green"></span> </div> </li> <li class="active" id="step2"><div class="d-none d-md-block"> <span class="smallCr br_wt bg_yellow"></span> </div></li> <li class="" id="step3"><div class="d-none d-md-block"> <span class="smallCr br_wt bg_red"></span> </div></li> <li class="" id="step4"><div class="d-none d-md-block"> <span class="smallCr br_wt bg_black"></span> </div></li> <li class="" id="step4"><div class="d-none d-md-block"> <span class="smallCr br_wt"></span> </div></li> </div>

#progressbar { margin-bottom: 30px; overflow: hidden; color: #455A64; padding-left: 0px; margin-top: 30px } #progressbar li { list-style-type: none; width: 4%; float: left; position: relative; font-weight: 400 } #progressbar #step1:before { content: " "; } #progressbar #step2:before { content: " "; } #progressbar #step3:before { content: " "; } #progressbar #step4:before { content: " "; } #progressbar #step5:before { content: " "; } #progressbar #step6:before { content: " "; } #progressbar li:before { width: 24px; height: 24px; line-height: 25px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: #444495; border-radius: 50%; margin: auto; color: #fff; } #progressbar li:after { content: ''; width: 100%; height: 2px; background: #455A64; position: absolute; left: 0; top: 10px; z-index: -1 } #progressbar li:last-child:after { border-top-right-radius: 10px; border-bottom-right-radius: 10px; position: absolute; left: -50% } #progressbar li:first-child:after { border-top-left-radius: 10px; border-bottom-left-radius: 10px; position: absolute; left: 50% } #progressbar li:last-child:after { border-top-right-radius: 10px; border-bottom-right-radius: 10px } #progressbar li:first-child:after { border-top-left-radius: 10px; border-bottom-left-radius: 10px } #progressbar li.active:before, #progressbar li.active:after { border: 2px solid #444495; background-color: #fff; } #progressbar li:before, #progressbar li:after { border: 2px solid #444495; background-color: #fff; } .br_wt{ background:white; } .bg_green{ background: green; border-color: green !important; } .bg_yellow{ background: yellow; border-color: yellow !important; } .bg_red{ background: red; border-color: red !important; } .bg_black{ background: black; border-color: black !important; } .smallCr{ min-height: 16px; min-width: 16px; display: inline-block; margin-top: -20px; border-radius: 50%; position: absolute; margin-left: -8px; border: 2px solid; }