Bootstrap variable overriding with LESS
I have been investigating for the whole day as I considered it would be worthwhile spending some time to learn best practice for customizing Bootstrap.
I can see that there is a friendly page available for customizing elements selectively from http://twitter.github.io/bootstrap/customize.html but I want to have more control than this without touching original bootstrap source files.
To start with, I basically wanted to test out changing the grid from 12 to 16 columns and to do this, I created my own variable less file and added @gridColumns:16; only to this file and imported this custom less inside bootstrap.less as follows.
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
**@import "../custom-variables.less"; //Override variables**
Then, using WinLess I compiled the bootstrap.less file to get new bootstrap.css with overridden variable import call and linked the css with html file but the grid won't change to 16 columns.
Can anyone please point out what I am doing wrong?
Answer
Overriding variables after importing the original bootstrap.less works great for me:
@import "less/bootstrap.less";
@body-bg: red;
@text-color: green;
@link-color: blue;
Compiling the above LESS source outputs properly customized Bootstrap CSS code.
Relevant info: http://lesscss.org/features/#variables-feature-lazy-loading