<p dir="auto">The <code class="notranslate">@gridColumns</code>, <code class="notranslate">@gridColumnWidth</code>, and <code class="notranslate">@gridGutterWidth</code> options previously available on the Bootstrap 2 custom compile page seem to be missing from <a href="http://getbootstrap.com/customize/" rel="nofollow">http://getbootstrap.com/customize/</a>.</p>
<p dir="auto">See:</p>
<ul dir="auto">
<li><a href="http://www.paulirish.com/2012/box-sizing-border-box-ftw/" rel="nofollow">http://www.paulirish.com/2012/box-sizing-border-box-ftw/</a></li>
<li><a href="http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/" rel="nofollow">http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/</a></li>
</ul>
<p dir="auto">box-sizing: border-box is currently implemented with a note on avoiding conflicts with third party components:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing
* {
.box-sizing(border-box);
}
*:before,
*:after {
.box-sizing(border-box);
}"><pre class="notranslate"><code class="notranslate">// Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing
* {
.box-sizing(border-box);
}
*:before,
*:after {
.box-sizing(border-box);
}
</code></pre></div>
<p dir="auto">Updating the implementation to the following will make it easier to reset box-sizing within components:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}"><pre class="notranslate"><code class="notranslate">html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
</code></pre></div>
<p dir="auto">Components could simply reset like this and have all their descendant elements inherit correct box-sizing, something that wouldn't work with the current <code class="notranslate">* { box-sizing: border-box }</code> implementation:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".component {
  box-sizing: content-box;
}"><pre class="notranslate"><code class="notranslate">.component {
  box-sizing: content-box;
}
</code></pre></div>