title: Bootstrap 3 - multiple grid sytems in one site
body: <p>For a project I'm woking on I want to fill the entire <code>.container</code> with 7 columns in my grid system. This I can achieve by manipulating the correct Less variable (<code>@grid-columns</code>) before compiling a bootstrap.css file at <a href="http://getbootstrap.com/customize/#grid-system" rel="nofollow">http://getbootstrap.com/customize/#grid-system</a>.</p>
  
  <p>But, what if I at another instance of the same site want to go back to the normal 12 column grid system?</p>
  
  <p>If I was to create another bootstrap.css, leaving the <code>@grid-columns</code> at 12, I still couldn't load it to a browser since it would conflict with the previously created bootstrap.css since similar class references would be used in both (e.g. <code>.col-md-7</code>) css files.</p>
  
  <p>Can't wrap my head around this problem, but there must be a way, right?!? Or, maybe I'm just missing something.</p>