Bootstrap-Color Picker in Sugar CRM 7

Last Modified Date

(Updated on June/2021)

[The latest version of SugarCRM is Sugar 10. We have developed multiple SugarCRM plugins, all of which are compatible with Sugar 10. The latest version also utilizes the Twitter Bootstrap library, which can be used with ease. ]

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

How can we help you?

Contact Sales

  • US +1 415 800 4489
  • UK +44(0)207-993-8524
  • PK +92(0)423-640-7166

Looking For a Job?