Bootstrap-Color Picker in Sugar CRM 7

Last Modified Date

A couple of days ago, I was working in SugarCRM 7 and wanted to add a color picker plugin. As mentioned in the previous post, I tried using JQuery color picker but was not successful in using it.  Exploring Sugar 7, I discovered that Sugar 7 has several plugins e.g. Tooltip, EllipsisInline, and many others. Furthermore, I discovered that Sugar 7 uses the Twitter Bootstrap library. In Sugar, this library is in include/javascript/twitterbootstrap directory.

I used the bootstrap-color picker plugin from the Bootstrap library and it was amazingly very easy to use. Sugar adds this library when the application loads and I just had to call the color picker functions on the particular element.


  1. <div class=“input-append color” data-color=“rgb(255, 146, 180)” data-color-format=“rgb”>
  2. <input type=“text” class=“span2” value=“” >
  3. <span class=“add-on”><i style=“background-color: rgb(255, 146, 180)”></i></span>
  4. </div>



  1. $(‘#color’).colorpicker()


Rolustech is a SugarCRM Certified Developer & Partner Firm. We have helped more than 700 firms with various SugarCRM integrations and customization. Get in touch for a FREE Business Analysis and get a solution to all your Sugar troubles.

Need Help? Get Free Consultation

By clicking you agree to our Terms and Conditions

Send me news and updates

Get in touch

Contact Information