<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 ----------> <div class="panel btn-pref btn-group btn-group-justified " role="group" style="margin-top:10px;height:720px;wight:900px; background-color:#adc;" > <center> <div class="tab-content " style= "margin-top:10px; " > <div class="tab-pane panel active" id="tab1" > <h2> <br> ... Tab 1</h2> </div> <div class="tab-pane panel " id="tab2" > <form role="form" class="form-inline" > <h2> <br> ... Tab 2</h2> </form> </div> <div class="tab-pane panel " id="tab3" > <form role="form" class="form-inline" > <h2> <br> ... Tab 3</h2> </form> </div> <div class="tab-pane panel fade in " id="tab4" > <form role="form" class="form-inline" > <h2> <br> ... Tab 4</h2> </form> </div> <div class="tab-pane panel fade in " id="tab5" > <form role="form" class="form-inline"> <h2> <br> ... Tab 5</h2> </form> </div> <div class="tab-pane panel fade in " id="tab6" > <form role="form" class="form-inline"> <h2> <br> ... Tab 6</h2> </form> </div> </div> <div class="tabnav"> <div class="btn-group btn-group-justified "> <div class="btn-group " role="group"> <button id="b1" type="button" class="btn btn-nav" href="#tab1" data-toggle="tab" > <div class="visible" >Profile <span class="glyphicon glyphicon-user" aria-hidden="true"> </span></div> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-nav" href="#tab2" data-toggle="tab" > <div class="visible">Location <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></div> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-nav" href="#tab3" data-toggle="tab"> <div class="visible">Work <span class="glyphicon glyphicon-picture" aria-hidden="true"></span></div> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-nav" href="#tab4" data-toggle="tab"> <div class="visible">Upload <span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span></div> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-nav" href="#tab5" data-toggle="tab"> <div class="visible">Dashboard <span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span></div> </button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-nav" href="#tab6" data-toggle="tab"> <div class="visible">Studio <span class="glyphicon glyphicon-bell" aria-hidden="true"></span></div> </button> </div> </div> </div> </center> </div>

/* Related to SIde MENU Text */ .tab-pane{ height:200%; width:100%; } .tab-pane{ height:absoulte; width:100%; } .tabnav{ margin-top:-18px; } .btn-nav { color: #e92d00; background-color: #fff; border: 1px solid #e0e1db; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .btn-nav:hover { color: green; cursor: pointer; -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */ transition: color 1s; } .btn-nav.active { background: grey; color: #1dcaff; padding: auto; border-top:2px solid #1dcaff ; border-bottom:2px solid #1dcaff ; border-left: 2px solid #1dcaff; border-right: 2px solid #1dcaff; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-transition: border 0.3s ease-out, color 0.3s ease 0.5s; -moz-transition: border 0.3s ease-out, color 0.3s ease 0.5s; -ms-transition: border 0.3s ease-out, color 0.3s ease 0.5s; /* IE10 is actually unprefixed */ -o-transition: border 0.3s ease-out, color 0.3s ease 0.5s; transition: border 0.3s ease-out, color 0.3s ease 0.5s; -webkit-animation: pulsate 1.2s linear infinite; animation: pulsate 1.2s linear infinite; } .btn-nav .glyphicon { padding-top: 8px; font-size: 30px; } .btn-nav.active p { margin-bottom: 8px; } @-webkit-keyframes pulsate { 50% { color: #000; } } @keyframes pulsate { 50% { color: #000; } } @media (max-width: 100%) { .btn-group { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; } } @media (max-width: 100%) { .btn-nav .glyphicon { padding-top: 12px; font-size: 26px; } }

var activeEl = 0; $(function() { var items = $('.btn-nav'); $( items[activeEl] ).addClass('active'); $( ".btn-nav" ).click(function() { $( items[activeEl] ).removeClass('active'); $( this ).addClass('active'); activeEl = $( ".btn-nav" ).index( this ); }); });