Why Did Bootstrap 3 Switch to `box-sizing: border-box`?

Unraveling the Switch to Border-Box in Bootstrap 3

Bootstrap 3 introduced a noticeable change with the inclusion of box-sizing: border-box for all elements. This deviation from the default content-box value has sparked questions about its rationale.

In the migration process from Bootstrap 2.3.2 to 3.0.0, developers observed significant dimensional differences attributed to this change. The following CSS rule in bootstrap.css points to the heart of this modification:

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

Border-Box's Impact on Dimensions

Under the traditional content-box model, an element's width and height only account for its content, excluding padding and border. This would result in issues when trying to calculate the total width or height, as they would extend beyond the declared values.

In contrast, border-box includes both padding and border within the width and height calculations. This simplified model ensures that the final rendered box size aligns precisely with the specified width and height, regardless of padding or border size.

The Role of Border-Box in Bootstrap's Grid System

While the move to border-box affects all elements, it is particularly impactful in Bootstrap 3's fluid grid system. In fluid grids, columns are defined as a percentage of the container's total width, allowing them to scale responsively.

Under the content-box model, calculating column sizes would require factoring in the fixed-width gutter on either side. This complexity is eliminated with border-box. The declared width of a column now includes both its border and padding, providing a consistent and intuitive means of sizing.

Industry Acceptance and Benefits

Beyond its benefits to Bootstrap's grid system, the adoption of box-sizing: border-box is gaining widespread acceptance in web development. It promotes consistent behavior across browsers and provides an intuitive approach to layout and sizing.

The release notes for Bootstrap 3 explicitly state the intention behind this change: "Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system."

Additional Resources:

• [Browser Support for Border-Box](http://css-tricks.com/box-sizing/)
• [Benefits of Border-Box](http://www.paulirish.com/2012/box-sizing-border-box-ftw/)

The above is the detailed content of Why Did Bootstrap 3 Switch to `box-sizing: border-box`?. For more information, please follow other related articles on the PHP Chinese website!