Bootstrap Color Picker

Bootstrap Color Picker

Into this article, I’m explaining about Bootstrap color picker.

Download bootstrap CSS and JavaScript file from, download the 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. According to a good UI, the interface is based on Twitter bootstrap styles, so it looks cute with almost any site's styles.
A-Color-Picker tool is a cool and easy-to-use jQuery plugin that helps you pick beautiful and powerful colors 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

 You should read this Article - Console Color Enumeration in C#

Last updated:11/19/2019 2:11:36 AM
Anonymous User

Anonymous User

I am a content writter !


Leave Comment