100

I'm migrating my Bootstrap themes from v2.3.2 to v3.0.0 and one thing I noticed is that a lot of dimensions are calculated differently, due to the following styles in bootstrap.css.

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Can anyone explain why Bootstrap switches the box-sizing of all elements to border-box? I suspect it has to do with the new grid system being percent-based, but the selector above does not only apply to the grid elements obviously.

Seems a bit radical imho :-)

Anyone care to give some insight?

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
Alexander Rechsteiner
  • 5,694
  • 5
  • 34
  • 47
  • 12
    Thanks for the CSS snippet; it's exactly what I was looking for to apply this to a non-bootstrap project. :) – berto Aug 23 '14 at 01:43
  • Anyone know why the *:before and *:after are needed? – limscoder Nov 21 '14 at 23:06
  • 3
    @limscoder The `*:before` and `*:after` are needed to also apply this box model to the `:before` and `:after` pseudo-elements. – buschtoens Dec 07 '14 at 08:55
  • 1
    The * selector makes it difficult for developers to use content-box or padding-box elsewhere in the CSS. The best practice when starting a new project from scratch is `html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }` – Jarek Przygódzki Sep 13 '16 at 07:35

1 Answers1

105

The release notes tell you: (http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/)

Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.

Personally I think most benefits go to the grid system. In Twitter's Bootstrap all grids are fluid. Columns are defined as percentage of the total width. But the gutter have a fixed width in pixels. By default a padding of 15px on both side of the column. The combination of width in pixels and percentage could be complex. With border-box this calculating is easy because the border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. (http://css-tricks.com/box-sizing/)

Also read: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Alexis Wilke
  • 19,179
  • 10
  • 84
  • 156
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • 62
    Simple example: Try putting a 1 pixel border on a 100% width div, with `content-box`. Now you've got something thats 100% + 2 pixels. With `border-box`, you don't have that problem, its still 100%. – Petercopter Feb 14 '14 at 23:23
  • 1
    Good additional discussion and justification of it in [this issue](https://github.com/twbs/bootstrap/issues/12351#issuecomment-33154996). – yuvilio Feb 26 '15 at 17:43
  • 1
    Also worth noting the box sizing implementation best practice has been updated so as not to interfere with 3rd party libraries. I'm not sure if Bootstrap plans on updating, but they should: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice – jbyrd Jul 09 '15 at 21:22
  • 2
    Personally, I never changed box model since IE6. That was the ONLY thing IE knew better. And yes, today you have calc() to go around those 100% plus 2 pixel problems, but the way of the samurai has ALWAYS been the border-box with its border and padding included. That's how human brain imagines a box. I love to see this "new trend", I have a welcomeback drink for them. – dkellner Oct 14 '15 at 16:49