<p dir="auto">I do understand that box-sizing: border-box; is perfect way to go for all box models but you guys are forgetting yourself or you are just asking Bootstrap users to drop it.</p>
<p dir="auto">Instead of applying box-sizing: border-box; where you  need it  you went  the other way around and just threw this in .</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}"><pre class="notranslate"><span class="pl-ent"><span class="pl-c1">*</span></span> {
  <span class="pl-c1">-webkit-box-sizing</span><span class="pl-kos">:</span> border-box;
     <span class="pl-c1">-moz-box-sizing</span><span class="pl-kos">:</span> border-box;
          <span class="pl-c1">box-sizing</span><span class="pl-kos">:</span> border-box;
}
<span class="pl-ent"><span class="pl-c1">*</span></span><span class="pl-kos">:</span><span class="pl-c1">before</span><span class="pl-kos">,</span>
<span class="pl-ent"><span class="pl-c1">*</span></span><span class="pl-kos">:</span><span class="pl-c1">after</span> {
  <span class="pl-c1">-webkit-box-sizing</span><span class="pl-kos">:</span> border-box;
     <span class="pl-c1">-moz-box-sizing</span><span class="pl-kos">:</span> border-box;
          <span class="pl-c1">box-sizing</span><span class="pl-kos">:</span> border-box;
}</pre></div>
<p dir="auto">You even utilize normalize.css where in fact they were very cautious where to use it.</p>
<p dir="auto"><a href="https://raw.github.com/necolas/normalize.css/master/normalize.css">https://raw.github.com/necolas/normalize.css/master/normalize.css</a></p>
<p dir="auto">I am not sure if you are aware how many websites are using bootstrap in conjunction with other plugins and scripts, or just as an addon for stylish buttons and forms. With this you are braking layouts left and right.</p>
<p dir="auto">On Stackoverflow many posts are coming up with this exact issue.</p>
<p dir="auto">OK  Paul Irish<br>
<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><br>
but this late in a game and as a wildcard  is irresponsible. Paul suggested this as a perfect solution and it works for people who are building something from scratch. But majority of your users are implementing Bootstrap in existing web layouts.</p>
<p dir="auto">You deliver a file that is over 6k lines , if you took some time and just lineup where exactly you need border-box that would be perfect way to go.</p>
<p dir="auto">.row,<br>
.form-group,<br>
.form-control<br>
.checkbox<br>
and few others would save the headache for many people out-there..</p>
<p dir="auto"><a href="http://stackoverflow.com/questions/19109470/twitter-bootstrap-box-sizing-ruined-my-layout" rel="nofollow">http://stackoverflow.com/questions/19109470/twitter-bootstrap-box-sizing-ruined-my-layout</a><br>
<a href="http://stackoverflow.com/questions/20478498/why-is-bootstrap-css-using-box-sizing-border-box" rel="nofollow">http://stackoverflow.com/questions/20478498/why-is-bootstrap-css-using-box-sizing-border-box</a><br>
<a href="http://stackoverflow.com/questions/15405837/using-box-sizing-border-box-with-twitter-bootstrap-2-x-can-we-do-it-easily-wi" rel="nofollow">http://stackoverflow.com/questions/15405837/using-box-sizing-border-box-with-twitter-bootstrap-2-x-can-we-do-it-easily-wi</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="19246010" data-permission-text="Title is private" data-url="https://github.com/mleibman/SlickGrid/issues/742" data-hovercard-type="issue" data-hovercard-url="/mleibman/SlickGrid/issues/742/hovercard" href="https://github.com/mleibman/SlickGrid/issues/742">mleibman/SlickGrid#742</a></p>
<p dir="auto">Now this one is funny,<br>
<a href="http://responsivesharepoint.codeplex.com/discussions/456314" rel="nofollow">http://responsivesharepoint.codeplex.com/discussions/456314</a></p>
<p dir="auto">poor guy!</p>
<p dir="auto">Sorry for my rant I hope you understand.</p>
<p dir="auto">The snippet below can be found in bootstrap.css:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}"><pre class="notranslate"><code class="notranslate">*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
</code></pre></div>
<p dir="auto">Using this global css reset is fine as long as someone uses Bootstrap exclusively. Once third party scripts come into play this global reset to <code class="notranslate">border-box</code> starts messing up layouts.</p>
<p dir="auto">For example, a lot of bug reports I'm getting for my (lightbox and tooltip) scripts concerning layouts being off end up being caused by this practice in Bootstrap. I'd say it's not something that belongs in a framework, unless it's meant to be used without third party scripts.</p>
<p dir="auto">Foundation used to have this problem. It was fixed very elegantly in 5.0 by using a mixin to add the box-sizing reset to just the components that need it. By not defining it on <code class="notranslate">*</code> third party scripts remain unaffected and work out of the box. They can rely on the default box-sizing <code class="notranslate">content-box</code> being in place without anyone having to make css adjustments to reset things back to default.</p>
<p dir="auto">I'm hoping something similar can be done in Bootstrap.</p>