Bootstrap 4 Color Picker Plugin- colorPalettePicker.js

by Posted on

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.

Bootstrap 4 Color Picker


Integrate Bootstrap 4 Color Picker

Libraries

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

<!--CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
 
<!--JS-->
<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.

<div id="colorpalettediv"></div>

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.

DEMO | DOWNLOAD

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.


Published by admin