<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-6"> <div id="private_label" class="panel panel-default carousel slide" data-ride="carousel"> <div class="panel-heading"> <h3 class="panel-title"> Private Label </h3> </div> <div class="panel-body carousel-inner" style="padding: 0px;"> <div class="item active"> <img src="http://placehold.it/600x375/1dd2af" alt="1 slide"> <div class="carousel-caption"> <h3>TURQUOISE</h3> </div> </div> <div class="item"> <img src="http://placehold.it/600x375/40d47e" alt="2 slide"> <div class="carousel-caption"> <h3>EMERALD </h3> </div> </div> <div class="item"> <img src="http://placehold.it/600x375/19b698" alt="3 slide"> <div class="carousel-caption"> <h3>GREEN SEA</h3> </div> </div> <div class="item"> <img src="http://placehold.it/600x375/2cc36b" alt="4 slide"> <div class="carousel-caption"> <h3>NEPHRITIS</h3> </div> </div> </div> <div class="panel-footer"> <ol class="carousel-indicators"> <li data-target="#private_label" data-slide-to="0" class="active"></li> <li data-target="#private_label" data-slide-to="1"></li> <li data-target="#private_label" data-slide-to="2"></li> <li data-target="#private_label" data-slide-to="3"></li> </ol> <ul class="nav nav-pills nav-justified"> <li><a href="#"><span class="glyphicon glyphicon-chevron-left"></span>Previous</a></li> <li><a href="#"><span class="fa fa-rocket"></span>Launch</a></li> <li><a href="#"><span class="fa fa-envelope"></span>Email</a></li> <li><a href="#">Next<span class="glyphicon glyphicon-chevron-right"></span></a></li> </ul> </div> </div> </div> </div> </div>

#booths-container { width: 200px; height: 200px; position: relative; margin: 0 auto; border:1px solid blue;} .booth { position: absolute; list-style: none; margin: 0px; padding: 0px; border: solid 1px #fff; box-sizing: border-box; font-size: 9px; cursor: pointer; opacity: .8; border-radius: 5px; } .booth:hover { opacity: 1; } [data-boothtype="prime"],[data-boothtype="center"] { width: 30px; height: 30px; } [data-boothtype="prime"] { background: #fbb040;} [data-boothtype="center"] { background: #8dc63f;}

$("#booths-container").click(function(){ var selText = $(this).html(); //working version - for single button // //$('.btn:first-child').html(selText+'<span class="caret"></span>'); //working version - for multiple buttons // $('selecteditem').html(selText); }); });