title: Bootstrap variable overriding with LESS
body: <p>I have been investigating for the whole day as I considered it would be worthwhile spending some time to learn best practice for customizing <a href="http://twitter.github.io/bootstrap/">Bootstrap</a>.</p>
  
  <p>I can see that there is a friendly page available for customizing elements selectively from <a href="http://twitter.github.io/bootstrap/customize.html">http://twitter.github.io/bootstrap/customize.html</a> but I want to have more control than this without touching original bootstrap source files.</p>
  
  <p>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. </p>
  
  <pre><code>// Core variables and mixins
  @import "variables.less"; // Modify this for custom colors, font-sizes, etc
  @import "mixins.less";
  **@import "../custom-variables.less"; //Override variables**
  </code></pre>
  
  <p>Then, using <a href="http://winless.org/">WinLess</a> 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.</p>
  
  <p>Can anyone please point out what I am doing wrong?</p>