Bootstrap Color Picker


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 Nov-30-2017 01:38:31 AM

Leave Comment