<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="p-3 d-flex w-100"> <div class="big-box"> <div class="position-relative"> <div class="line"></div> <div class="box bg-white p-2 d-flex justify-content-center align-items-center"> 1 </div> </div> <div class="text-center">Get Quotation</div> </div> <div class="big-box"> <div class="position-relative"> <div class="line"></div> <div class="box bg-white p-2 d-flex justify-content-center align-items-center"> 2 </div> </div> <div class="text-center">Additional Coverage</div> </div> <div class="big-box"> <div class="position-relative"> <div class="line"></div> <div class="box bg-white p-2 d-flex justify-content-center align-items-center"> 3 </div> </div> <div class="text-center">Personal Info</div> </div> <div class="big-box"> <div class="position-relative"> <div class="line"></div> <div class="box bg-white p-2 d-flex justify-content-center align-items-center"> 4 </div> </div> <div class="text-center">Confirm N Pay</div> </div> <div class="big-box"> <div class="position-relative"> <div class="line"></div> <div class="box bg-white p-2 d-flex justify-content-center align-items-center"> 5 </div> </div> <div class="text-center">Confirm N Pay</div> </div> </div>

.line { height: 2px; background: black; position: absolute; right: 50%; z-index: 0; width: 100%; top: 0; bottom: 0; /* left: 0px; */ margin: auto; } .box { z-index: 100; position: relative; width: 50px; border: 1px solid black; background: white; margin: auto; } .big-box{ flex:1; /*width: 25%;*/ } .big-box:first-child .line { width: 0; }