How to use Bootstrap Colorpicker Example

by

Throughout Bootstrap colorpicker example tutorial you will learn how to use bootstrap color picker in php or framworks with jquery. Mostaly we need to use and implement bootstrap colorpicker in our admin panel project such as Laravel, PHP, Vue, React, Angular or jquery and php frameworks.

So we have added have added simplay way to add and use bootstrap-colorpicker in any project.

Add Bootstrap Colorpicker CDN

First your need to add the cdns in your blade files, if you are using javascript framework then you can use packages.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.3/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.3/js/bootstrap-colorpicker.min.js">

Add Code for Bootstraap Color Picker

Here is our html part with javascript where we have added the colorpicker class and initialize the bootstrap picker using js. 

<div class="container">
    <h1>Bootstrap Colorpicker</h1>
    <div id="cp2" class="input-group colorpicker colorpicker-component"> 
      <input type="text" value="#00AABB" class="form-control" /> 
      <span class="input-group-addon"><i></i></span> 
    </div>
</div>

<script type="text/javascript">
  $('.colorpicker').colorpicker({});
</script>

Full Example Bootstrap Colorpicker

If you are not understanad above code here is the full example to use bootstrap colorpicker in your project easy way.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Colorpicker Example</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>  
</head>
<body style="background-color: #7eded2;">
<div class="container">
    <h1>Bootstrap Colorpicker</h1>
    <div id="cp2" class="input-group colorpicker colorpicker-component"> 
      <input type="text" value="#00AABB" class="form-control" /> 
      <span class="input-group-addon"><i></i></span> 
    </div>
</div>

<script type="text/javascript">
  $('.colorpicker').colorpicker({});
</script>
</body>
</html>

I hope this example help you.

Leave a Comment