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.

<!--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);
	}
});

I hope it can help you. Download source code here.