Home > DeveloperSection > Beginner > Bootstrap Color Picker

Bootstrap Color Picker


Bootstrap Bootstrap 
Ratings:
0 Comment(s)
 3862  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).

 

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

 


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

Follow MindStick