<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 ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet"> <div class="container"> <ul class="step d-flex flex-nowrap"> <li class="step-item"> <a href="" class="">Step 1</a> </li> <li class="step-item"> <a href="" class="">Step 2</a> </li> <li class="step-item"> <a href="" class="">Step 3</a> </li> <li class="step-item"> <a href="" class="">Step 4</a> </li> </ul> </div>

.step { list-style: none; margin: .2rem 0; width: 100%; } .step .step-item { -ms-flex: 1 1 0; flex: 1 1 0; margin-top: 0; min-height: 1rem; position: relative; text-align: center; } .step .step-item:not(:first-child)::before { background: #4eaf4a; content: ""; height: 2px; left: -50%; position: absolute; top: 9px; width: 100%; } .step .step-item a { color: #acb3c2; display: inline-block; padding: 20px 10px 0; text-decoration: none; } .step .step-item a::before { content: '\f00c'; position: absolute; top: 5px; margin: auto; right: 0px; left:0; color: #ffffff; font-family: "Font Awesome 5 Free"; font-size: 9px; z-index: 9; } .step .step-item a::after { background: #4eaf4a; border: .1rem solid #fff; border-radius: 50%; content: ""; display: block; height: 17px; left: 50%; position: absolute; top: .2rem; transform: translateX(-50%); width: 17px; z-index: 1; }