Why Did Bootstrap 3 Switch to Box-Sizing: Border-Box

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

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/

bootstrap 3 box-sizing not working

The box-sizing : border-box; property doesn't include margin in the size of the elements. It includes border width and paddding. That is why they don't stay inline.

border-box

The width and height properties include the padding and
border, but not the margin.[...]

source : MDN

To simulate margin, you can use border with the same colour as the background :

.blueBox {
  background-color: #26a8e0;
  color: white;
  height: 100px;
  border: 20px solid #fff;
  box-sizing: border-box;
  padding: 20px;
}

Why set box-sizing: content-box; on a singular element?

If we look at the Bootstrap source Less files, we see that these lines of CSS actually comes from the normalize.css project. The goal of normalize.css is to create a consistent CSS base across browsers. I found a commit from a few years ago where this CSS was added. The explanation for that commit states:

Firefox uses different box-sizing and height values to all other
browsers. Firefox doesn't currently support box-sizing without the
-moz- prefix, so we use both the vendor-prefixed and unprefixed
properties to ensure that it matches the content-box value of other
browsers. It also requires the height to be set to 0.

That commit then links to issue #133 which states:

The box-sizing of the HR element is set to border-box in latest
Firefox (15) while it is set to content-box in Chrome (22), Opera
(12), Safari (5.1), IE9 and IE8.

So, it sounds like this was introduced to explicitly make the box-sizing of the hr element consistent across browsers. In the context of the Bootstrap project, this is probably unnecessary since Bootstrap is already providing consistency by setting all elements to box-sizing: border-box.

twitter bootstrap box-sizing ruined my layout

Yes, don't do that. Removing the box-sizing: border-box will ruin your grid. See also: Why did Bootstrap 3 switch to box-sizing: border-box?

An example to show what happens:

<div class="container" style="background-color:lightblue;"> 
    <div class="row" style="background-color:red;"> 
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
    </div>
</div>
<br>
<div class="container nonborderbox" style="background-color:lightblue;">    
    <div class="row" style="background-color:red;"> 
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
    </div>
</div>

With:

.nonborderbox *
{
-webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
} 

The above will result in:

With box-sizing: border-box the gutter construct by padding will be out of the calculating of your column's width.

Try to understand Bootstrap's grid and the box-sizing: border-box and figure out why this will ruin your layout. Fix this problems or consider to don't use Bootstrap at all for your project.

Using box-sizing : border-box with Twitter Bootstrap 2.x, can we do it easily without breaking everything?

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.

Using box-sizing : border-box with Twitter Bootstrap 2.x, can we do it easily without breaking everything?

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.

Why width includes border when box-sizing is content-box?

Buttons (and some other items) use a box-sizing property "border-box" instead of "content-box"; this explains the different behavior.

Documentation for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

You can change this in css using:

.square{
   box-sizing: content-box; /* border-box */
}

dash_daq BooleanSwitch fails with border-box from Dash Bootstrap Components

I was able to get around this by defining a CSS class for the the BooleanSwitch and then setting all its children to unset the box-sizing.

In app.py:

daq.BooleanSwitch(id = 'switch1', on=False, className = 'custom-switch')

In your stylesheet:

.custom-switch *{ 
    box-sizing: unset!important;
}

---

Related Topics