Bootstrap Demo
Bootstrap Code
Output
<!DOCTYPE html> <html> <head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link href="//cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css" rel="stylesheet"> <link href="css/bootstrap-colorpicker/bootstrap-colorpicker.css" rel="stylesheet"> <link href="css/bootstrap-colorpicker/main.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-2.2.2.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="js/bootstrap-colorpicker/bootstrap-colorpicker.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-5"> <div class="example"> <div class="example-title">A demo of colorpicker with simple textbox</div> <div class="example-content well"> <div class="example-content-widget"> <input id="simple-color-picker" type="text" class="form-control" value="#8f3596"/> <script> $(function () { $('#simple-color-picker').colorpicker(); }); </script> </div> </div> </div> </div> </div> </div> </body> </html>
A demo of colorpicker with simple textbox