<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="row2"> <div class="col-md-1 col"> <div class="flex-item red"></div> <div class="flex-item green"></div> </div> <div class="col-md-1 col"> <div class="flex-item green"></div> <div class="flex-item red"></div> </div> <div class="col-md-1 col"> <div class="flex-item blue"></div> <div class="flex-item green"></div> </div> <div class="col-md-1 col"> <div class="flex-item green" ></div> <div class="flex-item blue"></div> </div> <div class="col-md-1 col"> <div class="flex-item green" ></div> <div class="flex-item green"></div> </div> <div class="col-md-1 col"> <div class="flex-item blue" ></div> <div class="flex-item blue"></div> </div> </div>

html, body { height: 100%; } body { margin: 0; } .red{ background-color:red; } .green{ background-color:green; } .blue{ background-color:blue; } .flex-container { height: 100%; margin: 3; } .row2 { display: inline-block; } .col{ cursor:pointer; width:28px; padding:0; align:center; border: transparent 2px solid; margin:4px 0px; } .col:hover{ border: 2px solid lightblue; border-radius:10px; } .sel{ z-index:10000; background-color:grey; } .flex-item { width: 20px; height: 20px; margin:2px; line-height: 20px; color: white; font-weight: bold; font-size: 2em; text-align: center; border-radius:50%; float:left }

$(".col").click(function (e) { alert('!'); $(this).toggleClass('sel'); $(this).siblings().removeClass('sel'); $("#colorPalette").val($(this).attr('id')); var id = $(this).attr('id'); }); $("span.tel").click(function (e) { $(this).toggleClass('glyphicon glyphicon-ok'); $(this).siblings().removeClass('glyphicon glyphicon-ok'); $("#colorPalette2").val($(this).attr('id')); var id = $(this).attr('id'); });