Bootstrap Colorpicker Example using JQuery

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.

1. Include JS and CSS

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>

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.

<div id="cp-component" class="input-group">
  <input type="text" value="#269faf" class="form-control">
  <span class="input-group-addon"><i></i></span>
</div>

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.

<script type="text/javascript">
  $(function () {
    $('#cp-component').colorpicker();
  });
</script>

4. Output

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

index.html





  <title>Colorpicker using Bootstrap 3</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>



  <h4>Colorpicker using Bootstrap 3 - <a href="https://www.cluemediator.com">Clue Mediator</a></h4>
  <div id="cp-component" class="input-group">
    <input type="text" value="#269faf" class="form-control">
    <span class="input-group-addon"><i></i></span>
  </div>

  <script type="text/javascript">
    $(function () {
      $('#cp-component').colorpicker();
    });
  </script>

Output - Bootstrap 3 Colorpicker - Clue Mediator

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.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.2.0/css/bootstrap-colorpicker.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.2.0/js/bootstrap-colorpicker.min.js"></script>

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

<input id="cp-component" type="text" value="#269faf" class="form-control">
<script type="text/javascript">
  $(function () {
    $('#cp-component').colorpicker();
  });
</script>

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