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

 Download bootstrap CSS and JavaScript file from  , download latest jQuery file from, download pick a color.css file from  and download pick a color.js file from .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: 

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

Download link:   

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

Download link: 

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

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

Download link:  

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). 


Html code here

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




Bootstrap Color Picker


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

Leave Comment