<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="container"> <div class="row"> <div class="col-md-12"> <div id="Carousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#Carousel" data-slide-to="0" class="active"></li> <li data-target="#Carousel" data-slide-to="1"></li> <li data-target="#Carousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-md-3"> <div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="..."> <div class="col-md-3"> <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> </div><!--.row--> </div><!--.item--> <div class="item"> <div class="row"> <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> </div><!--.row--> </div><!--.item--> <div class="item"> <div class="row"> <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> </div><!--.row--> </div><!--.item--> </div><!--.carousel-inner--> <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div><!--.Carousel--> </div> </div> </div><!--.container--> <div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="..."> <div class="btn-group" role="group"> <button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> <div class="hidden-xs">Stars</div> </button> </div> <div class="btn-group" role="group"> <button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <div class="hidden-xs">Favorites</div> </button> </div> <div class="btn-group" role="group"> <button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> <div class="hidden-xs">Following</div> </button> </div> </div> <div class="well"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1"> <h3>This is tab 1</h3> </div> <div class="tab-pane fade in" id="tab2"> <h3>This is tab 2</h3> </div> <div class="tab-pane fade in" id="tab3"> <h3>This is tab 3</h3> </div> </div> </div> </div>

body{padding-top:20px;} .carousel { margin-bottom: 0; padding: 0 40px 30px 40px; } /* The controlsy */ .carousel-control { left: -12px; height: 40px; width: 40px; background: none repeat scroll 0 0 #222222; border: 4px solid #FFFFFF; border-radius: 23px 23px 23px 23px; margin-top: 90px; } .carousel-control.right { right: -12px; } /* The indicators */ .carousel-indicators { right: 50%; top: auto; bottom: -10px; margin-right: -19px; } /* The colour of the indicators */ .carousel-indicators li { background: #cecece; } .carousel-indicators .active { background: #428bca; } /* USER PROFILE PAGE */ .card { margin-top: 20px; padding: 30px; background-color: rgba(214, 224, 226, 0.2); -webkit-border-top-left-radius:5px; -moz-border-top-left-radius:5px; border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-top-right-radius:5px; border-top-right-radius:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.hovercard { position: relative; padding-top: 0; overflow: hidden; text-align: center; background-color: #fff; background-color: rgba(255, 255, 255, 1); } .card.hovercard .card-background { height: 130px; } .card-background img { -webkit-filter: blur(25px); -moz-filter: blur(25px); -o-filter: blur(25px); -ms-filter: blur(25px); filter: blur(25px); margin-left: -100px; margin-top: -200px; min-width: 130%; } .card.hovercard .useravatar { position: absolute; top: 15px; left: 0; right: 0; } .card.hovercard .useravatar img { width: 100px; height: 100px; max-width: 100px; max-height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.5); } .card.hovercard .card-info { position: absolute; bottom: 14px; left: 0; right: 0; } .card.hovercard .card-info .card-title { padding:0 5px; font-size: 20px; line-height: 1; color: #262626; background-color: rgba(255, 255, 255, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .card.hovercard .card-info { overflow: hidden; font-size: 12px; line-height: 20px; color: #737373; text-overflow: ellipsis; } .card.hovercard .bottom { padding: 0 20px; margin-bottom: 17px; } .btn-pref .btn { -webkit-border-radius:0 !important; }

$(document).ready(function() { $('#Carousel').carousel({ interval: 5000 }) }); $(document).ready(function() { $(".btn-pref .btn").click(function () { $(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default"); // $(".tab").addClass("active"); // instead of this do the below $(this).removeClass("btn-default").addClass("btn-primary"); }); });