<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 > <div class="steplabel">STEP 1</div> <div class="active" id="step1"> <div class="outerBorder"></div> <div class="whitepatch"></div> </div> </li> <li> <div class="steplabel">STEP 2</div> <div class="active" id="step2"> <div class="outerBorder"></div> <div class="whitepatch"></div> </div> </li> <li> <div class="steplabel">STEP 3</div> <div class="" id="step3"> <div class="outerBorder"></div> <div class="whitepatch"></div> </div> <div class="whitepatch"></div> <div class="subStep"> <div class="divicon"> <div class="whitepatch subStepmar"></div> </div> </div></li> <li> <div class="steplabel">STEP 4</div> <div class="" id="step4"> <div class="outerBorder"></div> <div class="whitepatch"></div> </div> </li> <li> <div class="steplabel">STEP 5</div> <div class="" id="step5"> <div class="outerBorder"></div> <div class="whitepatch"></div> </div> </li> <li> <div class="steplabel">STEP 6</div> <div class="" id="step6"> <div class="outerBorder"></div> <div class="whitepatch"></div> </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"; }