10

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

Kev
  • 4,017
  • 4
  • 26
  • 47
  • You should have a look at this http://stackoverflow.com/questions/8793876/twitter-bootstrap-borders – agriboz Mar 14 '13 at 10:10
  • thanks I knew this one but they don't really answer my question that is more like *bootstrap*{ box-sizing:border-box } (pseudo code here) – Kev Mar 14 '13 at 11:34
  • 2
    bootstrap does not play well with border-box when it comes to text fields, it seems. they look... squished and bad. –  Mar 30 '13 at 04:40
  • Note; Twitter-Bootstrap 3 now asserts `box-sizing:border-box` on all elements with the universal selector (`*`) – Faust Nov 27 '13 at 14:53
  • You are right I have updated the title of the question for future readers. – Kev Nov 27 '13 at 15:08

2 Answers2

16

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.

Jonatan Littke
  • 5,277
  • 2
  • 34
  • 39
  • 1
    The only problem is with input elements which look "squeezed" after this, so I would also add something like: input { .box-sizing( content-box ); } – isapir Jun 03 '13 at 02:05
  • I think you should still add the -moz-box-sizing . In last firefox version (21) in Mac OS, it didn't work without it. – Kev Jun 19 '13 at 09:09
  • @Amida See the dot before box-sizing? That's calling a mixin in LESS, which contains the rule with all the vendor prefixes necessary. It's built into Bootstrap. – Jonatan Littke Jun 19 '13 at 10:56
  • Ah ok I know about mixins but I didn't read carefully to see it was one. Thanks :) – Kev Jun 19 '13 at 11:16
  • Also, you may want to add the class `.add-on` in the input exception for content-box, because its padding is calculated for content-box. – Elias Dorneles Aug 14 '13 at 17:32
7

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.

CherryFlavourPez
  • 6,807
  • 4
  • 42
  • 47
  • That's funny I also added this to the bootstrap page to see but nothing really happened so I need more detailed feedback than just this. Nice post but I'll wait to see if someone can comment about a real case. :) – Kev Mar 14 '13 at 11:37
  • I'll almost certainly be proved wrong, but I doubt anyone has done exactly what you're asking - I'm not sure why you would? If you are making use of Bootstrap for layout etc, then what benefit would changing the `box-model` give you at that point? i.e. the benefit of this approach is in simplifying layout/normalising form elements etc., but that's all been done for you. – CherryFlavourPez Mar 14 '13 at 12:59
  • I'm just fed up to have to use inner div every time I need padding in my columns or to have to make some calculations like removing margin pixels to add a border or padding without breaking the grid. I feel the border-box model is the way to go but bootstrap 3 is not there yet. – Kev Mar 14 '13 at 16:16
  • As I put in my edit, the grid structure of Boostrap 2.x won't be affected by making the change - therefore I very much doubt that it will introduce anything but the smallest issues. – CherryFlavourPez Mar 14 '13 at 16:20
  • I saw your edit later. Just want to say thanks for taking the time investigating :) – Kev Jun 19 '13 at 09:10