Bootstrap: Why has bootstrap 4 made the container sizes smaller?

[cyphix333]

I have noticed since working with Bootstrap 4 that the container sizes are now 30px smaller than they were in Bootstrap 3 - for example, the large size in Bootstrap 3 was 1170px and in Bootstrap 4 the respective size is now 1140px.

What happened here?

[RyanZim]

Bootstrap 4 adds an extra grid tier. http://v4-alpha.getbootstrap.com/migration/#grid-system You should use 1 breakpoint larger than you would in v3 to achieve the same effect (eg. lg -> xl). See http://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints.

Please close this. Thanks!

[cyphix333]

I'm aware of the added grid tier, but that's not what I was asking. I was asking about the _container size_; this is not the same as the size of the different breakpoints.

[RyanZim]

OK, sorry.

I can't find the discussion, but I think the goal may have been to make all the container widths evenly divisible by 12 (simplifies the maths).

• 1170 / 12 = 97.5
• 1140 / 12 = 95

[cyphix333]

Hmm fair enough; just found it a little weird they decided to cut off 30px of screen space, something I find a little annoying.

[vladshcherbin]

What about 940, 940 / 12 = 78.333

[RyanZim]

What about 940

@VladShcherbin Where did you get that number?

[vladshcherbin]

@RyanZim here, Large breakpoint

[RyanZim]

Oops; didn't see that.

It would probably be best to open a new issue for this.

[flachware]

@RyanZim @cyphix333 I noticed default container widths getting smaller with each Bootstrap iteration too:

Bootstrap 2: 1170px*
Bootstrap 3: 1140px*
Bootstrap 4: 1110px*

• Effective space inside respective container sizes

Out of curiosity (and because displays tend to get rather larger), why not choose 1200px as default xl size?

It is evenly divisible and leads to a clean grid column width of 70px (based on the default grid gutter).