html - Bootstrap Snippet not working -

html - Bootstrap Snippet not working -

i trying snippet found work: http://bootsnipp.com/snippets/featured/simple-vertical-tab

it works can't alter tabs... here code:

<div class="container"> <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 bhoechie-tab-container"> <div style="position: absolute; top: 0; right: 0; width: 300px; text-align:right;padding-right: 20px;padding-top: 20px"> <?php echo "logged in " . $_session['username']; ?> <br> <a href="logout.php">logout</a> <br> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bhoechie-tab-menu"> <div class="list-group"> <a href="#" class="list-group-item active text-center"> <h4 class="glyphicon glyphicon-th-large"></h4> <br/> test1 </a> <a href="#" class="list-group-item text-center"> <h4 class="glyphicon glyphicon-user"></h4> <br/> test2 </a> <a href="#" class="list-group-item text-center"> <h4 class="glyphicon glyphicon-th-list"></h4> <br/> test3 </a> <a href="#" class="list-group-item text-center"> <h4 class="glyphicon glyphicon-credit-card"></h4> <br/> test4 </a> <a href="#" class="list-group-item text-center"> <h4 class="glyphicon glyphicon-stats"></h4> <br/> test5 </a> </div> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab"> <!-- overview section --> <div class="bhoechie-tab-content active"> <center> test </center> </div> <!-- train section --> <div class="bhoechie-tab-content"> <center> </center> </div> <!-- hotel search --> <div class="bhoechie-tab-content"> <center> <h1 class="glyphicon glyphicon-home" style="font-size:12em;color:#55518a"></h1> <h2 style="margin-top: 0;color:#55518a">cooming soon</h2> <h3 style="margin-top: 0;color:#55518a">hotel directory</h3> </center> </div> <div class="bhoechie-tab-content"> <center> <h1 class="glyphicon glyphicon-cutlery" style="font-size:12em;color:#55518a"></h1> <h2 style="margin-top: 0;color:#55518a">cooming soon</h2> <h3 style="margin-top: 0;color:#55518a">restaurant diirectory</h3> </center> </div> <div class="bhoechie-tab-content"> <center> <h1 class="glyphicon glyphicon-credit-card" style="font-size:12em;color:#55518a"></h1> <h2 style="margin-top: 0;color:#55518a">cooming soon</h2> <h3 style="margin-top: 0;color:#55518a">credit card</h3> </center> </div> </div> </div> </div>

and css:

body { background-color: #666699; } span.glyphicon-link { font-size: 5.2em; } .btn {border-radius: 0;} .form-control {border-radius: 0;} .div {border-radius: 0;} /* bhoechie tab */ div.bhoechie-tab-container{ z-index: 10; background-color: #ffffff; padding: 0 !important; border:1px solid #ddd; margin-top: 20px; margin-left: 50px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175); background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); } div.bhoechie-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0; } div.bhoechie-tab-menu div.list-group{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a .glyphicon, div.bhoechie-tab-menu div.list-group>a .fa { color: #5a55a3; } div.bhoechie-tab-menu div.list-group>a:first-child{ } div.bhoechie-tab-menu div.list-group>a:last-child{ } div.bhoechie-tab-menu div.list-group>a.active, div.bhoechie-tab-menu div.list-group>a.active .glyphicon, div.bhoechie-tab-menu div.list-group>a.active .fa{ background-color: #666699; background-image: #666699; color: #ffffff; } div.bhoechie-tab-menu div.list-group>a.active:after{ content: ''; margin-top: -13px; border-left: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 10px solid #5a55a3; } div.bhoechie-tab-content{ background-color: #ffffff; /* border: 1px solid #eeeeee; */ padding-left: 20px; padding-top: 10px; } div.bhoechie-tab div.bhoechie-tab-content:not(.active){ display: none; } .navbar-login { width: 305px; padding: 10px; padding-bottom: 0px; } .navbar-login-session { padding: 10px; padding-bottom: 0px; padding-top: 0px; } .icon-size { font-size: 87px; }

what doing wrong?

edit (forgot add together javascript code post, utilize original one...):

$(document).ready(function() { $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) { e.preventdefault(); $(this).siblings('a.active').removeclass("active"); $(this).addclass("active"); var index = $(this).index(); $("div.bhoechie-tab>div.bhoechie-tab-content").removeclass("active"); $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addclass("active"); }); });

html css twitter-bootstrap