Bootstrap: Why the v4 change from 544 to 576px for small breakpoint?

[Jakobud]

Regarding this commit: https://github.com/twbs/bootstrap/commit/1d0d0dac769cccaa3df62bafb7fb999c2a086adb

I'm trying to find the issues regarding the reason for the changes to the breakpoint values, but I'm not having much luck. Does this have something to do with width vs max-width of the grid container?

How did you guys land at 576px? I understand that 544px was originally chosen because it's halfway between 320 and 768. But 544 + 32 = 576 and I'm not sure how that number was chosen, especially since gutters are 15px wide. Was it arbitrarily chosen?

Can anyone shed some light on this decision? I'm interested in learning why in order to educate myself?

[Jakobud]

I found this discussion:

https://github.com/twbs/bootstrap/issues/18054

But still confused on the 32px thing. https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss says Gutter width is 30px but the above issue says that the spacer size (32px) should be used to calculate the 576 instead of using the gutter size (30px).

Also, why is there so much discrepency between the breakpoints and max container widths for each layout size?

576 - 540 = 36px
768 - 720 = 48px
992 - 960 = 32px
1200 - 1140 = 60px

I'm really don't understanding why each max container width is simply the breakpoint value minus one gutter width (30px). What am I missing here?

[mdo]

I'm trying to find the issues regarding the reason for the changes to the breakpoint values, but I'm not having much luck. Does this have something to do with width vs max-width of the grid container?

For awhile in v4, we had a bug that the xs container was wider than the media query breakpoint, as mentioned in #18054. The change in dimensions from 544px to 576px fixes that issue.

How did you guys land at 576px? I understand that 544px was originally chosen because it's halfway between 320 and 768.

That's not how we landed there exactly. That math checks out because each of these container sizes are multiples of 12, given our 12 column grid system.

But 544 + 32 = 576 and I'm not sure how that number was chosen, especially since gutters are 15px wide. Was it arbitrarily chosen?

The outer media query breakpoint has less to do with any specific math or numbers, and more to do with approximate screen resolutions minus room for a visible scrollbar. So, 1024px leaving room for the scrollbar and then some, I arrived at 992px. Could be any other close value honestly.

I'm really don't understanding why each max container width is simply the breakpoint value minus one gutter width (30px). What am I missing here?

As mentioned above, it's not a difference of a specific Bootstrap gutter (30px). It's just to give the fixed-width container the ability to reasonably center the content within the viewport at a particular breakpoint.

---

I'll see what I can do to provide some docs for this in the future. Not an immediate concern of mine since it doesn't come up too often, but I'll keep it in mind.

[Jakobud]

Thanks. I am always interested in learning why certain standards are chosen for projects. Thank you again,

[stephan-v]

Is there by any chance time for founders of the grid to explain their reasoning behind why certain container sizes, breakpoints, etc. were chosen in v4?

I had to look long and hard for a bit of information here but something like a blogpost would be of much help to me and others trying to figure out the reasoning behind all of this.

If there is such a thing already I would be happy with a link. So far the documentation does not explain any of this. Perhaps it would be nice to have a documented section explained how this exact grid with some of the design decision has come to be?

Thanks.

[iatek]

Read this on how the 3.x breakpoints came to be: #14894

[dehghani-mehdi]

I'll see what I can do to provide some docs for this in the future. Not an immediate concern of mine since it doesn't come up too often, but I'll keep it in mind.

@mdo did you?