Why did Bootstrap 3 switch to box-sizing: border-box?

Solution 1:

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/