Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/itsjavi/bootstrap-colorpicker

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.
https://github.com/itsjavi/bootstrap-colorpicker

bootstrap bootstrap-colorpicker bootstrap-components bootstrap-plugin bootstrap3 bootstrap4 color color-picker colorpicker jquery twitter-bootstrap

Last synced: 3 months ago
JSON representation

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Host: GitHub
URL: https://github.com/itsjavi/bootstrap-colorpicker
Owner: itsjavi
License: mit
Archived: true
Created: 2012-06-01T10:30:19.000Z (about 12 years ago)
Default Branch: master
Last Pushed: 2022-04-07T23:45:47.000Z (about 2 years ago)
Last Synced: 2024-03-20T16:44:46.910Z (3 months ago)
Topics: bootstrap, bootstrap-colorpicker, bootstrap-components, bootstrap-plugin, bootstrap3, bootstrap4, color, color-picker, colorpicker, jquery, twitter-bootstrap
Language: JavaScript
Homepage: https://itsjavi.com/bootstrap-colorpicker/
Size: 4.85 MB
Stars: 1,383
Watchers: 63
Forks: 377
Open Issues: 13
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md

Lists

my-awesome-stars - itsjavi/bootstrap-colorpicker - Bootstrap Colorpicker is a modular color picker plugin for Bootstrap. (JavaScript)
awesome-frontend - Colorpicker plugin for Twitter Bootstrap
awesome - itsjavi/bootstrap-colorpicker - Bootstrap Colorpicker is a modular color picker plugin for Bootstrap. (JavaScript)

README

        

# Bootstrap Colorpicker

[Bootstrap Colorpicker](https://github.com/itsjavi/bootstrap-colorpicker/) is a modular color picker plugin for Bootstrap 4.

[![Build Status](https://img.shields.io/travis/itsjavi/bootstrap-colorpicker/master.svg?style=flat-square)](https://travis-ci.org/itsjavi/bootstrap-colorpicker)

[![npm](https://img.shields.io/npm/v/bootstrap-colorpicker.svg?style=flat-square)](https://www.npmjs.com/package/bootstrap-colorpicker)

> THIS PROJECT IS NOT MAINTAINED ANYMORE.

> After almost 10 years, it won't receive any further update. I recommend you using more modern solutions like [React Color](https://casesandberg.github.io/react-color/). You are still free to adapt this project and create forks and variants of it.

## Install

You can get the latest version in many different ways:

- Downloading the tarball from npm the registry: https://registry.npmjs.org/bootstrap-colorpicker/-/bootstrap-colorpicker-3.4.0.tgz  (you can change the version in the url to any released tag)

- Cloning using Git: `git clone https://github.com/itsjavi/bootstrap-colorpicker.git`

- 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`.

## Versions

  

    

        Colorpicker version

        Compatible Bootstrap version

        Dependencies

    

  

  

    

        

          v2.x 


          Documentation

        

        Bootstrap 3 or 4

        

          


            jQuery >= 1.10

            Bootstrap CSS (input addon)

          

        

    

    

        

          v3.x 


          Documentation

        

        Bootstrap 4 or without Bootstrap

        

          

            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.

## Examples

### With Bootstrap

The Bootstrap JS dependency is optional and it is mainly needed for the popover support.

No Bootstrap CSS is required for the plugin to work.

```html

  

  

  


      Bootstrap Colorpicker Demo (with Bootstrap)

      

  

  

  

  

  

    $(function () {

      // Basic instantiation:

      $('#demo-input').colorpicker();

      

      // Example using an event, to change the color of the #demo div background:

      $('#demo-input').on('colorpickerChange', function(event) {

        $('#demo').css('background-color', event.color.toString());

      });

    });

  

```

### Without Bootstrap

To use the plugin without Bootstrap, the `popover` option should be set to `false` or `null` and, depending on your implementation,

you will usually need to set inline to `true` and a `container` selector option.

```html

  

  

  


      Bootstrap Colorpicker Demo (without Bootstrap)

    

  

  

  

  

    $(function() {

      $('#demo').colorpicker({

        popover: false,

        inline: true,

        container: '#demo'

      });

    });

  

```

## Contributions

* [Issues](https://github.com/itsjavi/bootstrap-colorpicker/issues)

* [Pull Requests](https://github.com/itsjavi/bootstrap-colorpicker/pulls)

* [Milestones](https://github.com/itsjavi/bootstrap-colorpicker/milestones)

This project exists thanks to all the [people who contribute](https://github.com/itsjavi/bootstrap-colorpicker/graphs/contributors).

Please read [CONTRIBUTING](https://github.com/itsjavi/bootstrap-colorpicker/blob/master/.github/CONTRIBUTING.md) 

before sending a pull request or issue.

## License

The MIT License (MIT).

Please see the [License File](https://github.com/itsjavi/bootstrap-colorpicker/blob/master/LICENSE) for more information.

## Credits

Written and maintained by [Javi Aguilar](https://itsjavi.com) and all other contributors.

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

*Thanks to JetBrains for supporting this project.*