Change The Size Of Bootstrap Colorpicker

If you want to change the size of bootstrap colorpicker, here are a few changes you have to make in bootstrap-colorpicker.js and bootstrap-colorpicker.css files.

The colorpicker documentation mentions that you have to define the slider and class properties while initializing the colorpicker for making it bigger. In this way, you don't have to make changes during the colorpicker initialization. You make your change once, and it will work for every initialization.
 
For making the colorpicker larger, you have to find the below-mentioned classes in the bootstrap-colorpicker.css file and replace the properties according to below-mentioned styles. This will also work in responsive UI.
 

Changes in bootstrap-colorpicker.css

 
Note
Width and height should be same in each class.
  1. .colorpicker - saturation {    
  2.     width100 px;    
  3.     height100 px;    
  4.     background - image: url...........    
  5. }.colorpicker - hue, .colorpicker - alpha {    
  6.     width15 px;    
  7.     height100 px;    
  8.     floatleft;    
  9.     cursor: row - resize;    
  10.     margin - left: 4 px;    
  11.     margin - bottom: 4 px;    
  12. }.colorpicker.colorpicker - horizontal.colorpicker - bar {    
  13.     width100 px;    
  14. }.colorpicker.colorpicker - horizontal.colorpicker - hue.colorpicker - guide, .colorpicker.colorpicker - horizontal.colorpicker - alpha.colorpicker - guide {    
  15.     displayblock;    
  16.     height15 px;    
  17.     background#ffffff;    
  18.     positionabsolute;    
  19.     top: 0;    
  20.     left: 0;    
  21.     width1 px;    
  22.     bordernone;    
  23.     margin - top: 0;    
  24. }.colorpicker - bar - horizontal {    
  25.     height15 px;    
  26.     margin0 0 4 px 0;    
  27.     floatleft;    
  28.     width100 px;    
  29. }.colorpicker - bar {    
  30.     height15 px;    
  31.     margin5 px 0 0 0;    
  32.     clearboth;    
  33.     text - align: center;    
  34.     font - size10 px;    
  35. }    
Change the below mentioned functions in  bootstrap-colorpicker.js:
  1. /** 
  2.  * Vertical sliders configuration 
  3.  * @type {Object} 
  4.  */  
  5. sliders: {  
  6.         saturation: {  
  7.             maxLeft: 200,  
  8.             maxTop: 200,  
  9.             callLeft: 'setSaturationRatio',  
  10.             callTop: 'setBrightnessRatio'  
  11.         },  
  12.         hue: {  
  13.             maxLeft: 0,  
  14.             maxTop: 200,  
  15.             callLeft: false,  
  16.             callTop: 'setHueRatio'  
  17.         },  
  18.         alpha: {  
  19.             maxLeft: 0,  
  20.             maxTop: 200,  
  21.             callLeft: false,  
  22.             callTop: 'setAlphaRatio'  
  23.         }  
  24.     },  
  25.     /** 
  26.      * Horizontal sliders configuration 
  27.      * @type {Object} 
  28.      */  
  29.     slidersHorz: {  
  30.         saturation: {  
  31.             maxLeft: 200,  
  32.             maxTop: 200,  
  33.             callLeft: 'setSaturationRatio',  
  34.             callTop: 'setBrightnessRatio'  
  35.         },  
  36.         hue: {  
  37.             maxLeft: 200,  
  38.             maxTop: 0,  
  39.             callLeft: 'setHueRatio',  
  40.             callTop: false  
  41.         },  
  42.         alpha: {  
  43.             maxLeft: 200,  
  44.             maxTop: 0,  
  45.             callLeft: 'setAlphaRatio',  
  46.             callTop: false  
  47.         }  
  48.     }