title: How to get 18 columns in Bootstrap grid
body: <p>I use the latest Bootstrap version 3.2.0 with MVC 5, and I'm new to both.</p>
  
  <p>What I would like to do is make a grid with 18 columns using Bootstrap. I can see over here <a href="http://getbootstrap.com/css/#grid-less" rel="nofollow">http://getbootstrap.com/css/#grid-less</a> that it is indeed possible by changing <code>@grid-columns</code>.</p>
  
  <p>So in my MVC view I try this:</p>
  
  <pre><code>&lt;style&gt;
      @grid-columns: 18;
  &lt;/style&gt;
  </code></pre>
  
  <p>Followed by this HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-lg-1"&gt;col 1&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 2&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 3&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 4&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 5&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 6&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 7&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 8&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 9&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 10&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 11&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 12&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 13&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 14&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 15&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 16&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 17&lt;/div&gt;
    &lt;div class="col-lg-1"&gt;col 18&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But that doesn't work. What should I do to get this working?</p>
  
  <p>Thanks!</p>