How to use Bootstrap Colorpicker in Laravel Application

by

Laravel Bootstrap Colorpicker Example; In this tutorial you will learn how to use bootstrap color picker in laravel application. Bootstrap colorpicker is very popular library for picking color and save and to databse for dynamic use.

You can use the bootstrap color picker in laravel 5, laravel 6, laravel 7, laravel 8 or laravel 9 apps.

Bootstrap Colorpicker Cdn:

First we need to add these cdn and your blade file, so you can use the bootstrap colorpicker in laravel blade.

<head>
  <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>

Example:

Here the full example to add and use bootstrap colorpicker in laravel with example.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Colorpicker Example - codingdriver.com</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.1/css/bootstrap-colorpicker.min.css" rel="stylesheet">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>  
</head>
<body>
<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 the laravel bootstrap colorpicker example work for you.

Leave a Comment