itsjavi / Bootstrap Colorpicker
Licence: mit
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.
Stars: ✭ 1,351
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Bootstrap Colorpicker
Aurelia Slickgrid
Aurelia-Slickgrid a wrapper of the lightning fast & customizable SlickGrid datagrid with a few Styling Themes
Stars: ✭ 100 (-92.6%)
Mutual labels: bootstrap, jquery, bootstrap4, bootstrap3
E107
e107 Bootstrap CMS (Content Management System) v2 with PHP, MySQL, HTML5, jQuery and Twitter Bootstrap. Issue Discussion Room: https://gitter.im/e107inc/e107
Stars: ✭ 272 (-79.87%)
Mutual labels: bootstrap, jquery, bootstrap4, twitter-bootstrap
Colorpicker
jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).
Stars: ✭ 271 (-79.94%)
Mutual labels: color, color-picker, colorpicker, jquery
Bootstrap Validate
A simple Form Validation Library for Bootstrap 3 and Bootstrap 4 not depending on jQuery.
Stars: ✭ 112 (-91.71%)
Mutual labels: bootstrap, jquery, bootstrap4, bootstrap3
React Colorpickr
A themeable colorpicker with HSL and RGB support for React
Stars: ✭ 180 (-86.68%)
Mutual labels: color, color-picker, colorpicker
Gitmessenger
GitMessenger is github chat app built with socket.io , firebase, nodejs and bootstrap where developers can share code,images and much more 😊
Stars: ✭ 78 (-94.23%)
Mutual labels: bootstrap, jquery, bootstrap4
Vanilla Colorful
A tiny color picker custom element for modern web apps (2.7 KB) 🎨
Stars: ✭ 467 (-65.43%)
Mutual labels: color, color-picker, colorpicker
Angular Slickgrid
Angular-Slickgrid is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes
Stars: ✭ 298 (-77.94%)
Mutual labels: jquery, bootstrap4, bootstrap3
Mobirise
Free Website Builder for Bootstrap 4 & AMP
Stars: ✭ 664 (-50.85%)
Mutual labels: bootstrap, jquery, bootstrap4
global-color-picker
start the script and click anywhere to get rgb value at the cursor location
Stars: ✭ 31 (-97.71%)
Mutual labels: color, color-picker, colorpicker
Kallewheel
A custom color wheel extension for Adobe Photoshop
Stars: ✭ 16 (-98.82%)
Mutual labels: color, color-picker, colorpicker
Ecommerce
We're going to take you step-by-step to build a modern, fully open-source, eCommerce web application using Python, Django, Bootstrap, Javascript, and more.
Stars: ✭ 980 (-27.46%)
Mutual labels: bootstrap, jquery, bootstrap4
Pickr
🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
Stars: ✭ 3,759 (+178.24%)
Mutual labels: color, color-picker, colorpicker
Spring Web Rss Channels
A Full Stack RSS Reader web application built with Spring MVC and JSP. It uses libraries like Spring, JPA, Bootstrap, Apache Tiles, JSP etc. There is also a static code analysis tool called Checkstyle.
Stars: ✭ 40 (-97.04%)
Mutual labels: bootstrap, jquery, twitter-bootstrap
Bootstrap4 Website
Website built with bootstrap 4 Framework
Stars: ✭ 124 (-90.82%)
Mutual labels: bootstrap, jquery, bootstrap4
Cakephp3 Bootstrap Helpers
CakePHP 3.x Helpers for Bootstrap 3 and 4.
Stars: ✭ 134 (-90.08%)
Mutual labels: bootstrap, bootstrap4, bootstrap3
Bootstrap Colorpicker
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4.
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.2.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 |
|
|
v3.x Documentation |
Bootstrap 4 or without Bootstrap |
|
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
<div class="demo">
<h1>Bootstrap Colorpicker Demo (with Bootstrap)</h1>
<input id="demo-input" type="text" value="rgb(255, 128, 0)" />
</div>
<script src="//code.jquery.com/jquery-3.4.1.js"></script>
<script src="//unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="dist/js/bootstrap-colorpicker.js"></script>
<script>
$(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());
});
});
</script>
</body>
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
<div id="demo">
<h1>Bootstrap Colorpicker Demo (without Bootstrap)</h1>
<input type="text" value="rgb(255, 128, 0)" />
</div>
<script src="//code.jquery.com/jquery-3.4.1.js"></script>
<script src="dist/js/bootstrap-colorpicker.js"></script>
<script>
$(function() {
$('#demo').colorpicker({
popover: false,
inline: true,
container: '#demo'
});
});
</script>
</body>
Contributions
This project exists thanks to all the people who contribute.
Please read CONTRIBUTING before sending a pull request or issue.
License
The MIT License (MIT). Please see the License File for more information.
Credits
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].