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?

4
  • 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, 2014 at 1:43
  • Anyone know why the *:before and *:after are needed?
    – limscoder
    Nov 21, 2014 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 7, 2014 at 8: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; } Sep 13, 2016 at 7:35

1 Answer 1

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/

4
  • 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%. Feb 14, 2014 at 23:23
  • 1
    Good additional discussion and justification of it in this issue.
    – yuvilio
    Feb 26, 2015 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: css-tricks.com/…
    – jbyrd
    Jul 9, 2015 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, 2015 at 16:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.