# Color PickerADDON Bootstrap Colorpicker is a modular color picker plugin for Bootstrap

About

A nifty plugin that lets you select colors on the fly. The color pallet is auto generated or can be configured manually. The selection tool is loaded inside bootstrap's popover component, allowing you to load it from any direction, even on bootstrap modals

Find in-depth, guidelines, tutorials and more on Bootstrap Colorpicker's Official Documentation

## Simple usage

Most simple example, with any options or color information.

## Setting initial color

The initial color can be specified in 3 ways: input value, data-color attribute and programmatically with the color constructor option.
This demo is also showing how to use the input addon component to display the color.

The used initial color has this precedence order when present and not empty: color option, input value, input data-color attribute, colopicker element data-color attribute.

## Automatic format detection

Whenever the `format` option is 'auto', the first parsed color format will be detected and used as default, but when the option equals null (default), the format is recalculated every time. You can see the differences here, one of them allowing you to adjust the alpha channel:

## Force format

If defined, the format option forces an specific format, ignoring the original one.

## Disabled / Enabled states

When the input is disabled, the colorpicker also gets disabled.

## Horizontal mode

In this mode the hue and alpha bars are horizontal instead of vertical.

## Disable alpha channel

When the alpha channel is disabled with the `useAlpha` option, the alpha bar will be hidden and the color object will be restricted to opaque (alpha = 1).

## Add complementary color swatches

The colorpicker ColorItem class uses and comes bundled with Qix Color, a great color parsing library with a friendly API that allows you to manipulate and convert the color. ColorItem is just an abstraction layer on top of the library, which is more convenient for Bootstrap Colorpicker. In this example we use the ColorItem API to add color swatches based on a tetrad of the selected color

## Inline containerized mode

In this mode the colorpicker widget is an inline element and it is also placed inside the element (otherwise it is placed in the body). This example also shows the two ways of using the container option.
Inner inline →

Sibling inline →

## Disable hexadecimal hash

This example shows how to avoid the input to have the hexadecimal hash prefix, using the useHashPrefix option

## Transparent Support

Example showing the `transparent` named color support

## Use a custom fallback color

Use a predefined fallback color with the `fallbackColor` option, whenever the given one is invalid

## Panel Title

Panel tag `code`
Text

## Disable invalid color auto replacement

By default, the `autoInputFallback` option is enabled, meaning that whenever there is an invalid color typed in the input, it will be automatically replaced by a valid color or the fallback one

## Adjust popover options

You can use any Bootstrap Popover options (except: trigger, content and html) using the "popover" property in the colorpicker options

## Modal Example

You can use any Bootstrap Popover options (except: trigger, content and html) using the "popover" property in the colorpicker options

##### Modal title

## Customize template

You can use any Bootstrap Popover options (except: trigger, content and html) using the "popover" property in the colorpicker options

- Home
- Inbox
- Add More

Tracey Chang
IT Director

- Tracey Chang Online
- Oliver Kopyuv Online
- Dr. John Cook PhD Away
- Ali Amdaney Online
- Sarah McBrook Online
- oliver.kopyuv@gotbootstrap.com Offline
- oliver.kopyuv@gotbootstrap.com Busy
- oliver.kopyuv@gotbootstrap.com Offline
- +714651347790 Missed Call

Jun 19

Hey Tracey, did you get my files?

3:00 pm

Hi

Sorry going through a busy time in office. Yes I analyzed the solution.

It will require some resource, which I could not manage.

3:24 pm

Okay

Sending you some dough today, you can allocate the resources to this project.

3:26 pm

Perfect. Thanks a lot!

I will have them ready by tonight.

Cheers

Jun 20
Send

#### Layout Settings User Interface Settings

##### App Layout

Fixed Header header is in a fixed at all times
Fixed Navigation left panel is fixed
Minify Navigation Skew nav to maximize space
Hide Navigation roll mouse on edge to reveal
Top Navigation Relocate left pane to top
Fixed Footer page footer is fixed
Boxed Layout Encapsulates to a container

Fixed Background

##### Mobile Menu

Push Content Content pushed on menu reveal
No Overlay Removes mesh on menu reveal
Off-Canvas (beta) Content overlaps menu

##### Accessibility

Bigger Content Font content fonts are bigger for readability
High Contrast Text (WCAG 2 AA) 4.5:1 text contrast ratio
Daltonism (beta) color vision deficiency
Preloader Inside preloader will be inside content
SmartPanel Icons (not Panels) smartpanel buttons will appear as icons

##### Global Modifications

Clean Page Background adds more whitespace
Hide Navigation Icons invisible navigation icons
Disable CSS Animation Disables CSS based animations
Hide Info Card Hides info card from left panel
Lean Subheader distinguished page header
Hierarchical Navigation Clear breakdown of nav links
Dark Navigation Navigation background is darkend

##### Global Font Size

SM MD LG XL
Change root font size to effect rem values (resets on page refresh)

##### Theme colors more info

##### Theme Modes (beta) why beta?

###### Internet Explorer Issue

This particular component may not work as expected in Internet Explorer. Please use with caution.
Default
Light
Dark

Reset Settings
Factory Reset