It hugely simplifies working with fluid/responsive designs: there are some complex layouts and cases where consistent spacing is required that would be nigh on impossible without using border-box
.
I've recently used this (FTW!):
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
on a fairly large site, and found it has indeed solved a lot of issues. If you require support for IE7, my approach was to serve that browser a fixed-width version of the site, and use this polyfill only where needed.*
I really haven't found any drawbacks - it's a relief to be able to specify two columns of 50% width, add padding
and know that it will just work. In places where you might rely on the standard box-model
, you can always revert back to it for specific elements.
Bootstrap-specific
Regarding using Bootstrap specifically, you might run into some issues - I would suggest testing it out. Anecdotally, adding the above CSS into the Bootstrap homepage showed no problems.
The main grid system built into Bootstrap 2.x uses float
and margin
, so changing the box-model
will have no impact on that (it will just give you the ability to add padding
directly to columns).
Bootstrap 3 is moving to a mobile-first approach (and completely dropping IE7 support). That includes:
[A] new single grid system (still uses .row
) utilizes percentage widths, padding, and box-sizing: border-box
instead of pixel widths and margins.
So, they clearly believe in the benefits of taking this approach.
* My thinking was that I'm already relying on the HTML shim in Modernizr, so that browser is already reliant on JS for its layout. With SASS to store widths as variables this has worked pretty smoothly. That said, if usage for old IE is higher for any particular project, this approach becomes less appropriate.