In this article I’m explaining about Bootstrap color picker.

 Download bootstrap CSS and JavaScript file from http://getbootstrap.com/  , download latest jQuery file from http://jquery.com/, download pick a color.css file from http://www.zombieobsession.com/App/Lib/pick-a-color-master/build/1.1.6/css/  and download pick a color.js file fromhttp://www.zombieobsession.com/App/Lib/pick-a-color-master/build/1.1.6/js/ .Pick-a-Color is designed to be easy for anyone to use. The interface is based on Twitter Bootstrap styles so it looks lovely with the styles of almost any site. Pick-a-Color is a cool and easy-to-use jQuery plugin that helps you create beautiful and powerful color picker using Twitter's bootstrap framework.

Add these files in your project

<link href="~/Content/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" /> 

Download link: http://getbootstrap.com/ 

<link href="~/Content/bootstrap-3.1.1-dist/css/pick-a-color-1.1.6.min.css" rel="stylesheet" /> 

Download link: http://www.zombieobsession.com/App/Lib/pick-a-color-master/build/1.1.6/css/   

<script src="~/scripts/jquery-2.1.0.min.js"></script> 

Download link: http://jquery.com/ 

<script src="~/scripts/tinycolor-0.9.14.min.js"></script>

<script src="~/scripts/pick-a-color-1.1.6.min.js"></script>

Download link: http://www.zombieobsession.com/App/Lib/pick-a-color-master/build/1.1.6/js/  

Add this to your HTML where you want a Color Picker:

<input type="text" value="Your Default value" name="Name for Color" class="color-picker form-control">

Replace Your Default value with the default color code in hex code and replace Name For Color with your unique identifier for the color picker like (border-color or background-color). 

Example:

Html code here

<div class="container">
    <input type="text" value="000" name="bgcolor" class="color-picker form-control">
</div>
JavaScript code here
<script type="text/javascript">
    $(document).ready(function () {
        $(".color-picker").pickAColor({
            inlineDropdown: true
        });
 
    });
</script>

 

Output

 

Bootstrap Color Picker

 

  Modified On Mar-24-2018 02:47:45 AM

Leave Comment