Home > DeveloperSection > Beginner > Bootstrap Color Picker

Bootstrap Color Picker

Bootstrap Bootstrap 
0 Comment(s)
 3698  View(s)
Rate this:

Bootstrap Color Picker


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



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


Don't want to miss updates? Please click the below button!

Follow MindStick