<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="mt-5 mb-5 text-center"> <h2>Additional element : Steps Using Bootstrap 4</h2> </div> <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 active"> <a href="#!" class="">Step 3</a> </li> <li class="step-item"> <a href="#!" class="">Step 4</a> </li> </ul> <button>Next</button> </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: #0069d9; 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 { background: #0069d9; border: .1rem solid #fff; border-radius: 50%; content: ""; display: block; height: .9rem; left: 50%; position: absolute; top: .2rem; transform: translateX(-50%); width: .9rem; z-index: 1; } .step .step-item.active a::before { background: #fff; border: .1rem solid #0069d9; } .step .step-item.active ~ .step-item::before { background: #e7e9ed; } .step .step-item.active ~ .step-item a::before { background: #e7e9ed; }