<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <br><br><br><br> <div class="process"> <div class="process-row nav nav-tabs"> <div class="process-step" data-toggle="tab" href="#menu1"> <button type="button" class="btn-dot process-info" ></button> <p><small>SELF MONITORING</small></p> </div> <div class="process-step" data-toggle="tab" href="#menu2"> <button type="button" class="btn-dot process-info" ></button> <p><small>EXERCISE & DIET</small></p> </div> <div class="process-step" data-toggle="tab" href="#menu3"> <button type="button" class="btn-dot process-default" ></button> <p><small>LABS</small></p> </div> <div class="process-step" data-toggle="tab" href="#menu4"> <button type="button" class="btn-dot process-default" ></button> <p><small>ADVICE</small></p> </div> </div> </div> <div class="tab-content"> <div id="menu1" class="tab-pane fade active in"> <h3>Menu 1</h3> <p>Some content in menu 1.</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Some content in menu 2.</p> </div> <div id="menu3" class="tab-pane fade"> <h3>Menu 3</h3> <p>Some content in menu 2.</p> </div> <div id="menu4" class="tab-pane fade"> <h3>Menu 4</h3> <p>Some content in menu 2.</p> </div> <div id="menu5" class="tab-pane fade"> <h3>Menu 5</h3> <p>Some content in menu 2.</p> </div> </div> </div> </div>

.process-step .btn:focus{outline:none} .process{display:table;width:100%;position:relative} .process-row{display:table-row} .process-step button[disabled]{opacity:1 !important;filter: alpha(opacity=100) !important} .process-row:before{top:10px;bottom:0;position:absolute;content:" ";width:100%;height:1px;background-color:#ccc;z-order:0} .process-step{display:table-cell;text-align:center;position:relative;width: 25%;cursor: pointer;} .process-step p{margin-top:4px} .process-info { background-color: blue !important; border: 0 !important; } .process-error { background-color: red !important; border: 0 !important; } .btn-dot { display: inline-block; padding: 5px 5px; margin-bottom: 0; font-weight: 400; line-height: 1.42857143; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #ccc; border: 1px solid #ccc; border-radius: 50%; }