Why does Bootstrap 3 force the container width to certain sizes?

Question

If my browser is sized to be 992px wide, then .container has a max-width of 970px. If my browser is sized to be 991px wide, then .container has a max-width of 750px. Why is

Answer 1

This is because fixed-width + margin = break point. In bootstrap the margin grows while the container remains at a fixed width. When the browser is res-sized past break-point the container jumps just below break-point.

Answer 2

I used

.container {
    max-width: 100%;
}

in Bootstrap 4, and that removed it for me. Be careful applying that globally though. You can do this for specific containers instead:

.container.some-specific-class {
    max-width: 100%;
}

<div class="container some-specific-class">
  xyz...
</div>

Thanks to Dorian for the initial tip.

Answer 3

This is how Bootstrap and its grids work. Bootstrap defines 4 grids, see this table. Depending on screen size, one of these four grids will be used. 992px screen width is the breakpoint between the small and the medium grid.

Grids fit horizontally and scroll vertically as we are used to. For this reason the smaller grid will be applied below 992px.

The maximum container width can be "calculated" by finding which width can contain 12 equal-width columns plus any gutters. For the small grid 12 x 60 makes 720. The padding is constructed of 15 pixels on both sides of the column, minus 2 x 15 pixels on the outside of the grid. Those missing pixels (constructed with a negative margin) make 720 + (2 x 15) = 750.

750 px seems very small in relation to the 991px your mentioned. The small grid is intended for use on devices with a screen width of 768px and the medium grid for screen widths of 992px.

Answer 4

The official answer from the Bootstrap folks:

What it boils down to is that designing for specific breakpoints is easier (in my mind) than designing for unlimited, unknown sizes. The alternative you mention isn't wrong or bad, just different. I'd rather us maintain the tiers with very specific ranges