<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/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 resi_calculator_content"> <div class="row"> <div class="wizard-navigation"> <ul class = "nav nav-pills"> <li><a href="#loan_details" data-toggle="tab"> <div class="icon-circle"> <span class="number">1</span> </div> Loan details </a></li> <li><a href="#income" data-toggle="tab"> <div class="icon-circle"> <span class="number">2</span> </div> Income </a></li> <li><a href="#commitments" data-toggle="tab"> <div class="icon-circle"> <span class="number">3</span> </div> Commitments </a></li> </ul> </div> <!-- wizard navigation --> </div> </div>

.resi_calculator_content .wizard-navigation { padding-bottom: 35px; border-bottom: 2px solid #f1f1f1; margin-bottom: 40px; display:block; width: 100%; } .resi_calculator_content .wizard-navigation ul li { margin: 0 auto; width: 100%; display: inline-block; text-align: center; } .resi_calculator_content .wizard-navigation .nav-pills > li.active > a, .resi_calculator_content .wizard-navigation .nav-pills > li > a[aria-expanded="true"] { background: transparent; color: #284160; } .resi_calculator_content .wizard-navigation .nav-pills > li.active > a:hover { text-decoration: underline; } .resi_calculator_content .wizard-navigation .nav-pills > li > a .icon-circle { width: 36px; height: 36px; border-radius: 50%; background: #f0edea; display: block; padding: 7px 12px; color: #727272; font-weight: bold; margin: 0 auto; } .resi_calculator_content .wizard-navigation .nav-pills > li.active > a .icon-circle, .resi_calculator_content .wizard-navigation .nav-pills > li > a[aria-expanded="true"] .icon-circle { color: #fff; background: #274061; } .resi_calculator_content .wizard-navigation .nav-pills > li > a { font-size: 14px; text-align: center; color: #bdbdbd; pointer-events: none; } .resi_calculator_content .wizard-navigation .nav-pills > li > a:hover, .resi_calculator_content .wizard-navigation .nav-pills > li > a:focus { background: transparent; } .resi_calculator_content .wizard-navigation .nav-pills > li > a .icon-circle { font-size: 18px; } .resi_calculator_content .wizard-navigation .nav-pills > li > a .icon-circle { color: #727272; background: #f0edea; margin-bottom: 12px; }