About color picker

This jQuery plugin allows you to add a color picker to your Bootstrap form. This color picker can be fully customized to match the look and feel you want using HTML and CSS.

Examples

Simple example for adding a color picker.

<div class="bfh-colorpicker" data-name="colorpicker1">
</div>

Simple example for adding a color picker and selecting a default color.

<div class="bfh-colorpicker" data-name="colorpicker2" data-color="#FF0000">
</div>

Simple example for adding a color picker that doesn't close when selecting a color.

<div class="bfh-colorpicker" data-name="colorpicker3" data-close="false">
</div>

Available languages

Not applicable.

Options

Option Description
align String. Alignment for the icon 'left' or 'right'. Default: 'left'
input String. Class name for styling the input. Default: 'form-control'
placeholder String. Text for the placeholder of the input. Default: ''
name String. Name of the input. Default: ''
color String. Initial color. Default: '#000000'
close Boolean. To close the popover on selecting a color. Default: true

Methods

Method Description
$().bfhcolorpicker('toggle') Toggles the popover.

Events

Event Description
change.bfhcolorpicker This event fires immediately when a color is selected.
show.bfhcolorpicker This event fires immediately when the show instance method is called.
shown.bfhcolorpicker This event is fired when the select has been made visible to the user (will wait for CSS transitions, to complete).
hide.bfhcolorpicker This event is fired immediately when the hide instance method has been called.
hidden.bfhcolorpicker This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).