Bootstrap: Customization without touching original sources

Bootstrap: Customization without touching original sources

If you have bootstrap framework in the 3rd party libraries in your project then you probably do not want to touch the original sources but overwrite them. Here is how to do by compiling the less files.

When you download the bootstrap package along with the dist folder you have all the less files to compile it yourself.




But again you do not want touching these sources as new versions will replace old ones and overwrite your changes.

Here is a good practice:




|- bootstrap/ /*downloaded sources*/

|    |- less/

|    |- js/

|   ...

|- shared/ /*your modifications*/

|- bootstrap.less   

|- variables.less




1. Make a shared directory and copy the main bootstrap.less file.

2. Make your modifications in a new less file in the same shared directory. Include the original file you want to modify and then overwrite the variables you want.


 *    /style/shared/variables.less

@import "../bootstrap-master/less/variables.less";

@gridColumns: 16; // modification

3. Modify the bootstrap.less to include your shared less file/s with modifications.

4. Complie the modified bootstrap.less to bootstrap.css and use it