<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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-lg-10 offset-lg-1"> <div class="wizard"> <ul class="nav nav-tabs nav-fill" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="step1-tab" data-toggle="tab" href="#step1" role="tab" aria-controls="step1" aria-selected="true"> <span class="round-tab"> <i class="fa fa-credit-card"></i> </span> </a> </li> <li class="nav-item"> <a class="nav-link disabled" id="step2-tab" data-toggle="tab" href="#step2" role="tab" aria-controls="step2" aria-selected="false"> <span class="round-tab"> <i class="fa fa-user-tie"></i> </span> </a> </li> <li class="nav-item"> <a class="nav-link disabled" id="complete-tab" data-toggle="tab" href="#complete" role="tab" aria-controls="complete" aria-selected="false"> <span class="round-tab"> <i class="fa fa-check"></i> </span> </a> </li> </ul> </div> <form role="form"> <div class="tab-content"> <div class="tab-pane fade show active" role="tabpanel" id="step1" aria-labelledby="step1-tab"> <h5>Payment</h5> <hr> <button type="button" class="btn btn-primary next-step mr-auto">Save and continue</button> </div> <div class="tab-pane fade" role="tabpanel" id="step2" aria-labelledby="step2-tab"> <h5>Information</h5> <hr> <button type="button" class="btn btn-secondary prev-step">Previous</button> <button type="button" class="btn btn-primary next-step">Save and continue</button> </div> <div class="tab-pane fade" role="tabpanel" id="complete" aria-labelledby="complete-tab"> <h5>Completed</h5> <hr> </div> </div> </form> </div> </div> </div>

.wizard { margin: 20px auto; background: #fff; } .wizard .nav-tabs { position: relative; margin: 40px auto; margin-bottom: 0; } .wizard .wizard-inner { position: relative; } .wizard .nav-tabs .nav-item .nav-link.active, .wizard .nav-tabs .nav-item .nav-link:hover, .wizard .nav-tabs .nav-item .nav-link:focus { color: #555555; cursor: default; border: 0; border-bottom-color: transparent; } span.round-tab { width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: #fff; border: 2px solid #e0e0e0; z-index: 2; position: absolute; text-align: center; font-size: 25px; } span.round-tab i{ color:#555555; } .wizard .nav-item .nav-link.active > span.round-tab { background: #fff; border: 2px solid #007BFE; } .wizard .nav-tabs .nav-item .nav-link.active .round-tab i{ color: #007BFE; } .wizard .nav-tabs .nav-item .nav-link.disabled .round-tab { cursor: not-allowed; } span.round-tab:hover { color: #333; border: 2px solid #333; } .wizard .nav-tabs .nav-item .nav-link { width: 70px; height: 70px; margin: 20px auto; border-radius: 100%; padding: 0; } .wizard .nav-tabs .nav-item .nav-link:hover { background: transparent; } .wizard .tab-pane { position: relative; padding-top: 50px; } @media( max-width : 585px ) { .wizard { width: 90%; height: auto !important; } span.round-tab { font-size: 16px; width: 50px; height: 50px; line-height: 50px; } .wizard .nav-tabs .nav-item .nav-link { width: 50px; height: 50px; line-height: 50px; } .wizard .nav-tabs .nav-item .nav-link.active:after { content: " "; position: absolute; left: 35%; } }

$(document).ready(function () { //Wizard $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { var $target = $(e.target); if ($target.hasClass('disabled')) { return false; } }); $(".next-step").click(function (e) { var $active = $('.wizard .nav-tabs .nav-item .nav-link.active'); $active.next().removeClass('disabled'); nextTab($active); }); $(".prev-step").click(function (e) { var $active = $('.wizard .nav-tabs .nav-item .nav-link.active'); prevTab($active); }); }); function nextTab(elem) { $(elem).next().find('a[data-toggle="tab"]').click(); } function prevTab(elem) { $(elem).prev().find('a[data-toggle="tab"]').click(); }