bootstrap-colorpicker

Bootstrap Colorpicker is a modular jQuery plugin that turns a plain text input into a full HSV/RGB/HEX color picker, using Bootstrap’s own Popover component for the picker popup and Popper.js for positioning. Internally it delegates to a set of dedicated Handler classes — InputHandler, ColorHandler, SliderHandler, PopupHandler, PickerHandler, and AddonHandler — each responsible for one part of the widget’s lifecycle, bound and torn down alongside the parent Colorpicker instance.

The library ships with a small Extension system (Preview, Palette, Swatches, Debugger) so consumers can react to color-change events or add UI like brand swatches without touching the core class. It can run with or without Bootstrap itself, supports both vertical and horizontal slider layouts, and distributes prebuilt npm, Composer, and CDN bundles. The upstream project has not been actively maintained since 2022 — the README recommends more modern alternatives for new projects — though it remains a stable, widely used option for existing Bootstrap 4/jQuery codebases.

What You Get

• A jQuery plugin ($.fn.colorpicker) that binds to any input or element and manages its own lifecycle via a data-colorpicker-id attribute
• Prebuilt dist/js and dist/css bundles alongside the ES6 source, for direct <script>/<link> inclusion
• Four bundled extensions (Preview, Palette, Swatches, Debugger) covering the most common picker UI needs
• SCSS source for the widget so the visual style can be recompiled and customized

Common Use Cases

• Adding a color input to a Bootstrap 4 form
• Building a brand-color swatch selector for a CMS or admin panel
• Wiring color-change events into a live preview (background, text, borders, etc.)
• Maintaining a legacy jQuery/Bootstrap 4 admin panel without introducing a React/Vue dependency

Under The Hood

Architecture Colorpicker.js is the single orchestrator class instantiated per bound element; it composes six dedicated Handler classes (InputHandler, ColorHandler, SliderHandler, PopupHandler, PickerHandler, AddonHandler), each constructed with a reference back to the Colorpicker instance and explicitly bound/unbound in init()/destroy(). An Extension system (base Extension class, with Preview/Palette/Swatches/Debugger as concrete subclasses) is registered on top via registerExtension(), letting consumers add behavior without touching the core class. plugin.js is a thin jQuery adapter that instantiates one Colorpicker per matched element and caches it in $.data. The design is modular and layered, but every handler and extension is tightly coupled to the single Colorpicker “hub” object passed into their constructors, so a change to that hub’s internals ripples through all of them.

Tech Stack Written in ES6 classes, transpiled with an aging Babel 6 toolchain (babel-preset-env, babel-loader) and bundled with Webpack 4 driven through Gulp 3 (gulp-clean-css, webpack-stream, uglifyjs-webpack-plugin). Styles are SCSS compiled via gulp-sass and autoprefixed. Runtime dependencies (bootstrap, jquery, popper.js) are declared as regular npm dependencies but are effectively peer expectations of the host page. Documentation is generated with JSDoc plus Handlebars templates (gulp-compile-handlebars, handlebars-layouts) into a static docs site publishable via gh-pages, and a parallel composer.json mirrors the npm packaging for PHP-based asset pipelines.

Code Quality Only one test file exists (tests/Color-test.js, using ava), and it covers exclusively ColorItem string/format conversion — the Colorpicker class, its six handlers, and all extensions are untested. ESLint is configured and run as part of npm test, but there is no TypeScript or static type-checking, only JSDoc type annotations. CI is a legacy Travis config targeting Node 10 that has not been migrated to GitHub Actions. Error handling throughout is limited to defensive existence checks rather than explicit exception handling.

What Makes It Unique Its differentiator versus generic color-picker libraries is native integration with Bootstrap’s own Popover/Popper positioning rather than a bespoke overlay implementation, combined with a first-class Extension API that lets Preview, Palette, and Swatches behavior be added or replaced without forking core code. Declarative sliders/slidersHorz configuration maps drive both vertical and horizontal layouts from the same codebase. The problem domain itself (HSV slider color picking) is well-trodden and not novel, and the project’s own README now points users toward more modern, actively maintained alternatives.