Bootstrap Color Picker

Bootstrap Color Picker

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#


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

Anonymous User

I am a content writter !

0 Comments

Leave Comment