I want to integrate a color picker in my site. However, I integrated:\[code\]<link href="http://stackoverflow.com/questions/15866897/css/colorpicker.css" rel="stylesheet" type="text/css"><script src="http://code.jquery.com/jquery-latest.js"></script><script src="http://code.jquery.com/jquery-latest.js"></script><script src="http://stackoverflow.com/questions/15866897/js/bootstrap.js"></script><script src="http://stackoverflow.com/questions/15866897/js/jquery.js"></script><!--Color Picker --><script src="http://stackoverflow.com/questions/15866897/js/bootstrap-colorpicker.js"></script> <script>$(function(){window.prettyPrint && prettyPrint()$('#cp1').colorpicker({format: 'hex'});$('#cp2').colorpicker();$('#cp3').colorpicker();var bodyStyle = $('body')[0].style;$('#cp4').colorpicker().on('changeColor', function(ev){bodyStyle.backgroundColor = ev.color.toHex();});});</script> \[/code\]and the colorpicker component:\[code\] <div class="control-group"> <label class="control-label">Pick the color of your product</label> <div class="controls"> <div id="cp3" class="input-append color" data-color-format="rgb" data-color="rgb(255, 146, 180)"> <input class="span2" type="text" readonly="" value=""> <span class="add-on"> <i style="background-color: rgb(255, 146, 180)"></i> </span> </div> </div></div>\[/code\]However, when I call my site the color picker looks like that:
Do you have any idea how to fix that?