Using box-sizing : border-box with Twitter Bootstrap 2.x, can we do it easily without breaking everything?

Question

I have been using the "border-box box model" in my last projects. This has a lot of advantages that I won't explain here. But you can read about it here: Border-box in css-tricks

Now I'm starting a bigger project and we have decided that twitter bootstrap would be a good solution for our needs. I was wondering if it's possible to make it "border-boxed" without breaking everything. Has anybody tried this and what are/would be the consequences? Too many adjustments? real improvement?

Thank you

Answer 1

Yes.

Here's a mixin you can use in Bootstrap. It will automatically add all the vendor prefixes.

*, *:before, *:after {
    .box-sizing(border-box);
}

input {
    .box-sizing(content-box);
}

Inputs still need the content-box, otherwise they'll be too small.

Answer 2

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.