<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"> <div style=" position: relative; "> <div class="d-flex lineParent"> <div class="connecting-line"></div> </div> <div class="d-flex"> <div class="stepTab"> <div class="square-tab"> <div>1</div> </div> </div> <div class="stepTab"> <div class="square-tab"> <div>2</div> </div> </div> <div class="stepTab"> <div class="square-tab"> <div>3</div> </div> </div> <div class="stepTab"> <div class="square-tab"> <div>4</div> </div> </div> <div class="stepTab"> <div class="square-tab"> <div>5</div> </div> </div> </div> </div> <div class="d-flex"> <div class="stepTab text-break"> Step 1 </div> <div class="stepTab text-break"> Step 2 </div> <div class="stepTab text-break"> Step 3 </div> <div class="stepTab text-break"> Step 4 </div> <div class="stepTab text-break"> Step 5 </div> </div> </div>

.lineParent{ height: 100%; width:100%; align-items: center; position:absolute; } .connecting-line { height: 2px; background: #e0e0e0; width: 80%; margin: 0 auto; z-index: 1; } .stepTab{ width: 20%; text-align: center; z-index: 2; } .square-tab { width: 50px; height: 50px; /*line-height: 45px;*/ border-radius: 10px; background: #fff; border: 2px solid #e0e0e0; font-size: 25px; margin: auto; display: flex; justify-content: center; align-items: center; } @media only screen and (max-width: 576px) { body { background-color: lightblue; } }