css - 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 there this big jump in the max width? Why not just have a max-width of 1170px or so with 20px of margin on each side or something so that as you resize your browser window the container width scales smoothly instead of having a big jump?

E.g. at 992px screen width I have only very little margin on each side (11px). Yet at 991px wide I have 120px of margin on each side, which means nearly 25% of the screen real estate is empty margin on the sides. This doesn't make a lot of sense to me. Is there a reason this was done? Can I remove this behavior of preferring certain container widths without breaking things?

Answer 1

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