Bootstrap Color Picker by using mjolnic colorpicker plugin

Today now in this post i will give you an example of how to set an simple Bootstrap color picker by using mjolnic plugin. So We don’t need to use often color picker but it maybe we need sometimes. So, if we are used bootstrap then we need to choose Bootstrap color picker for the select color.

mjolnic Bootstrap colorpicker is provide us several way to use as like we need get color code when it select color in hex code and also it will provide user friendly layout on that way it’s is pretty good.

So, let’s run the bellow example or we can check the demo.

Example:
<html lang="en">


<head>


    <title>Bootstrap Color Picker Example</title>


    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://mjolnic.com/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" rel="stylesheet">


    <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://mjolnic.com/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script>


</head>


<body>


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


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


</body>


</html>

We can get more information about the bootstrap colorpicker plugin from here : bootstrap-colorpicker.

Read Also : How to Create Custom Blade Directive in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →