<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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"> <div class="row pt-4 mt-4"> <div class="col-sm-12"> <ul class="steps"> <li class="" data-step="1"> <span class="step">1</span> </li> <li class="active" data-step="2"> <span class="step">2</span> </li> <li class="" data-step="3"> <span class="step">3</span> </li> <li class="" data-step="4"> <span class="step stepdown">4<span class="down"><span class"ml-2">reverse</span></span></span> </li> </ul> </div> </div> <div class="row" style="padding-top:20px"> <div class="col-sm-12"> <ul class="steps"> <li class="hiddenstep" data-step="1"> <span class="step">1</span> </li> <li class="hiddenstep" data-step="2"> <span class="step">2</span> </li> <li class="last-child-reverse" data-step="3"> <span class="step">3</span> </li> <li class="up" data-step="4"> <span class="step">4</span> </li> </ul> </div> </div> <div class="row pt-4 mt-4" style="padding-top:60px"> <div class="col-sm-12"> <ul class="steps"> <li class="" data-step="1"> <span class="step">1</span> </li> <li class="active" data-step="2"> <span class="step stepdown">2<span class="down"><span class"ml-2"></span></span></span> </li> <li class="" data-step="3"> <span class="step">3</span> </li> <li class="" data-step="4"> <span class="step">4</span> </li> </ul> </div> </div> <div class="row" style="padding-top:20px"> <div class="col-sm-12"> <ul class="steps"> <li class="hiddenstep" data-step="1"> <span class="step">1</span> </li> <li class="last-child-reverse" data-step="2"> <span class="step">2</span> </li> <li class="" data-step="3"> <span class="step">3</span> </li> <li class="up" data-step="4"> <span class="step">4</span> </li> </ul> </div> </div> </div>

.steps { width: 100% !important; } .steps>li .step,.steps>li.complete .step:before{line-height:30px;background-color:#FFF;text-align:center} .steps{list-style:none;display:table;width:100%;padding:0;margin:0;position:relative} .steps>li{display:table-cell;text-align:center;width:1%} .steps>li .step{border:5px solid #CED1D6;color:#546474;font-size:15px;border-radius:100%;position:relative;z-index:2;display:inline-block;width:40px;height:40px} .steps>li:before{display:block;content:"";width:100%;height:1px;font-size:0;overflow:hidden;border-top:4px solid #CED1D6;position:relative;top:21px;z-index:1} .steps>li.last-child:before{max-width:50%;width:50%} .steps>li:last-child:before{max-width:50%;width:50%} .steps>li:first-child:before{max-width:51%;left:50%} .steps>li.active .step,.steps>li.active:before,.steps>li.complete .step,.steps>li.complete:before{border-color:#5293C4} .steps>li.complete .step{cursor:default;color:#FFF;-webkit-transition:transform ease .1s;-o-transition:transform ease .1s;transition:transform ease .1s} .steps>li.complete .step:before{display:block;position:absolute;top:0;left:0;bottom:0;right:0;border-radius:100%;content:"\f00c";z-index:3;font-family:FontAwesome;font-size:17px;color:#87BA21} .step-content,.tree{position:relative} .steps>li.complete:hover .step{-moz-transform:scale(1.1);-webkit-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);border-color:#80afd4} .steps>li.complete:hover:before{border-color:#80afd4} .steps>li .title{display:block;margin-top:4px;max-width:100%;color:#949EA7;font-size:14px;z-index:104;text-align:center;table-layout:fixed;word-wrap:break-word} .steps>li.active .title,.steps>li.complete .title{color:#2B3D53} .step-content .step-pane{display:none;min-height:200px;padding:4px 8px 12px} .step-content .step-pane.active{display:block} .steps>li .stepdown > span.down{ border-left:4px solid #CED1D6; color:#546474; font-size:15px; z-index:2; position: absolute; height: 100%; left: 13px; top: 100%; } .steps>li.hiddenstep { visibility: hidden; } .steps>li:before{ display:block; content:""; width:100%; height:1px; font-size:0; overflow:hidden; border-top:4px solid #CED1D6; position:relative; top:21px; z-index:1 } .steps>li.last-child-reverse:before{ max-width:50%; width:50%; left:50%; }