Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including bootstrap-colorpicker with all npm packages installed. Try it out:

var bootstrapColorpicker = require("bootstrap-colorpicker")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

bootstrap-colorpicker v3.2.0

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4.

Bootstrap Colorpicker

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4.

Build Status npm


You can get the latest version in many different ways:

  • Downloading a ZIP file from the releases
  • Cloning using Git: git clone
  • Installing via NPM: npm install bootstrap-colorpicker
  • Installing via Yarn: yarn add bootstrap-colorpicker
  • Installing via Composer: composer require itsjavi/bootstrap-colorpicker

Note that the dist files are only distributed via the NPM and Yarn installations.

For the rest methods, you will need to generate the files initializing the project with yarn install and then building the code using npm run build.


Colorpicker version Compatible Bootstrap version Dependencies
  • jQuery >= 1.10
  • Bootstrap CSS (input addon)
Bootstrap 4
  • jQuery >= 2.1.0
  • Bootstrap CSS (input addon, popover)
  • Bootstrap JS Bundle (popover)

Note that the plugin may work without Bootstrap if your code is not using any of the mentioned Bootstrap dependencies.

Basic example

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <link href="//" rel="stylesheet">
  <link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet">
  <div class="jumbotron">
      <h1>Bootstrap Colorpicker Demo</h1>
      <input id="demo" type="text" class="form-control" value="rgb(255, 128, 0)" />
  <script src="//"></script>
  <script src="//"></script>
  <script src="dist/js/bootstrap-colorpicker.js"></script>
    $(function () {
      // Basic instantiation:
      // Example using an event, to change the color of the .jumbotron background:
      $('#demo').on('colorpickerChange', function(event) {
        $('.jumbotron').css('background-color', event.color.toString());


This project exists thanks to all the people who contribute.

Please read CONTRIBUTING before sending a pull request or issue.


The MIT License (MIT). Please see the License File for more information.


Written and maintained by Javi Aguilar and all other contributors.

Based on Stefan Petre's color picker (2013).

Thanks to JetBrains for supporting this project.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free