<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 my-5"> <h1 class="display-2 text-center mb-5">STEP WIZARD</h1> <ul id="progressbar" class="text-center"> <li class="active" id="step1"> <div class="steplabel">STEP 1</div> <div class="outerBorder"></div> <div class="whitepatch"></div> </li> <li class="active" id="step2"> <div class="steplabel">STEP 2</div> <div class="outerBorder"></div> <div class="whitepatch"></div> </li> <li class="" id="step3"> <div class="steplabel">STEP 3</div> <div class="whitepatch"></div> <div class="subStep"> <div class="divicon"> <div class="whitepatch subStepmar"></div> </div> </div></li> <li class="" id="step4"> <div class="steplabel">STEP 4</div> <div class="whitepatch"></div> </li> <li class="" id="step5"> <div class="steplabel">STEP 5</div> <div class="whitepatch"></div> </li> <li class="" id="step6"> <div class="steplabel">STEP 5</div> <div class="whitepatch"></div> </li> </ul> </div>

#progressbar { margin-bottom: 30px; color: #455A64; padding-left: 0px; margin-top: 30px; min-height:200px; } #progressbar li { list-style-type: none; width: 16.66%; float: left; position: relative; font-weight: 400 } #progressbar #step1:before { content: "1"; } #progressbar #step2:before { content: "2"; } #progressbar #step3:before { content: "3"; } #progressbar #step4:before { content: "4"; } #progressbar #step5:before { content: "5"; } #progressbar #step6:before { content: "6"; } #progressbar li:before { width: 40px; height: 40px; line-height: 45px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: #455A64; border-radius: 50%; margin: auto; color: #fff; } #progressbar li:after { content: ''; width: 100%; height: 2px; background: #455A64; position: absolute; left: 0; top: 21px; z-index: -4 } #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 { background: red } .subStep{ border: 1px solid; border-top: 0px; border-radius: 30px; border-top-right-radius: 0px; border-top-left-radius: 0px; margin-top: -41px; min-height: 90px; border-width: 2px; align-items: flex-end !important; display: flex !important; } .subStep > .divicon{ margin: 0px auto; margin-bottom: -20px; } .subStep > div:after { content: "3"; } .subStep > div:after{ width: 40px; height: 40px; line-height: 45px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: #455A64; border-radius: 50%; margin: auto; color: #fff; } .outerBorder:before{ content: " "; width: 50px; height: 50px; display: inline-block; border: 2px solid red; position: absolute; border-radius: 50%; margin: 0px auto; margin-left: -25px; margin-top: -79px; background-color: #fff; z-index: -1; } .whitepatch{ content: " "; width: 55px; height: 55px; display: inline-block; border: 2px solid blue; position: absolute; border-radius: 50%; margin: 0px auto; margin-left: -27px; margin-top: -72px; background-color: #fff; z-index: -2; border: none; } .subStepmar{ margin-top: -9px; } .steplabel{ padding-top:10px; }