How were default breakpoints and container max-widths determined?

[kirkgrover]

I'm trying to understand the reasoning and value behind the default breakpoints and max container widths in Bootstrap. How were the values for the breakpoints (e.g., xs: 576px, md: 768px, lg: 992px, etc.) and container max-widths (e.g., lg: 960px, xl: 1140px, xxl: 1320px, etc.) determined? I'm assuming there's some underlying research or best practice to go along with these values, but I can't find good info on this.

Thanks to anyone who is able to help, in advance!

[kirkgrover]

Just got a response from Bootstrap on Twitter:

Mix of inputs—device sizes, common browser and screen resolutions, common grid system sizes, divisible by 12, etc.

Basically we find the most ideal container width that’s divisible by 12 that fits the a slightly larger common device size (breakpoint) where it’s centered and can allow for a scroll bar.