Bootstrap 4 Color Picker Plugin- colorPalettePicker.js

Bootstrap 4 Color Picker Plugin- colorPalettePicker.js : If you have a bootstrap website and you want to add color picker feature then in this post I am going to share simple Bootstrap 4 Color Picker Plugin colorpalettepicker.js. This jQuery plugin uses of Bootstrap 4 dropdown component to create a simple color picker for your website. The Bootstrap 4 color picker enables users to select a color from a predefined color palette.

Integrate Bootstrap 4 Color Picker

Libraries

Include all the bootstrap library after that add colorpalettepicker.js on page.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
 

<script src="https://code.jquery.com/jquery-3.3.1.min.js">script>
<script src="https://stackpath .bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js">script>
<script src="colorpalettepicker.js">script>

HTML

Create a DIV container which display color picker toggle.

JS

Call the plugin to activate a default color picker inside the DIV container.

$('#colorpalettediv').colorPalettePicker({
			lines:4,
			onSelected: function(color){
				alert(color);
			}
		});

See live demo and download source code.

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Related