Users Pricing

articles

home / developersection / articles / bootstrap color picker
Bootstrap Color Picker

Bootstrap Color Picker

Anonymous User 15086 21 Aug 2014 Updated 19 Nov 2019

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

Download bootstrap CSS and JavaScript file from http://getbootstrap.com/, download the 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 from
http://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. 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: 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

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



I am a content writter !