<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="d-none d-md-block">STEP 1</div></li> <li class="active" id="step2"><div class="d-none d-md-block">STEP 2</div></li> <li class="" id="step3"><div class="d-none d-md-block">STEP 3</div></li> <li class="" id="step4"><div class="d-none d-md-block">STEP 4</div></li> <li class="" id="step5"><div class="d-none d-md-block">STEP 5</div></li> <li class="" id="step6"><div class="d-none d-md-block">STEP 5</div></li> </ul> </div>

#progressbar { margin-bottom: 30px; overflow: hidden; color: #455A64; padding-left: 0px; margin-top: 30px } #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: -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 { background: red }