Today we’ll show you how to implement a bootstrap colorpicker example using JQuery. In this article, we will give you the two different examples to create color picker components using bootstrap version 3 and bootstrap version 4.

In the previous ReactJS article, we have explain to you how to implement a color picker component in React. Here We will create an HTML file to provide a bootstrap colorpicker example using JQuery so you can easily understand it.

Colorpicker component using Bootstrap 3

1. Include JS and CSS
2. Create HTML content
3. Initialize colorpicker
4. Output

1. Include JS and CSS

Let’s create a HTML file and add the following JS library and CSS links to implement bootstrap 3.

2. Create HTML content

In the next step, create a HTML content and bind the color picker with it. Therefore we will create a div element that contains input and span elements. On click of this element, we will open a color picker component to pick a color.

In the above code, we have passed the default color code as a value in the input field.

3. Initialize colorpicker

At last, we have to initialize the colorpicker component using JQuery. Add the following code at the bottom of the page.

4. Output

Let’s combine all code together in an HTML file and run the file in the browser.

index.html

Colorpicker component using Bootstrap 4

To implement colorpicker component using Bootstrap 4, we have to use the bootstrap version 4 of the JS and CSS. Add the following links in the head part of the HTML.

Also, we have to slightly update the HTML content and initialize the colorpicker component as shown below.

Again let’s combine all code together and check the output in the browser.

index.html