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?

Is [this related](http://stackoverflow.com/questions/9780333/fluid-or-fixed-grid-system-in-responsive-design-based-on-twitter-bootstrap)? It sound like the same problem to me. — Scott Solmer, Oct 16 '13 at 00:23
This is not important, as a device with 992px/991px screen width is hard to find, the CSS was set to common devices width like iPad or smartphones. Of course you can replace the original with your own CSS, to fit for your browser width(dragging), but what you did will not affect how they perform in pad/smartphone devices. — Kooki3, Oct 16 '13 at 08:05
I agree a device with 992px/991px screen width is hard to find, but you can have a larger screen resolution and have your browser not maximized so that it is a bit easier to encounter this situation. — Ben McCann, Oct 16 '13 at 18:15
@Kooki3 - I discovered a common situation where it is a problem: Two side-by-side windows on a 1920-wide monitor each are 960 (or a bit smaller after subtracting scrollbars). A size at which default bootstrap is especially bad, because it pads out from 768. — ToolmakerSteve, May 06 '19 at 16:20

score 34 · Accepted Answer · answered Oct 17 '13 at 23:14

34

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

answered Oct 17 '13 at 23:14

Ben McCann

18,548
25
83
101

26

I have a `.container { width: auto; }` to fix that – Dorian Dec 02 '13 at 22:36
28

http://getbootstrap.com/css/#grid-options Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid. – chilltemp Mar 03 '14 at 17:07
1

I use width: auto and max-width 960 (since i dont want my page in full width if in full screen). – user3711421 Mar 03 '16 at 23:27
Can you link to the answer you got? – gdoron Jul 13 '16 at 17:48
They all are wrong. You always tend to fix scrolling down (no right scroll) and Its better to design not for specific "size milestone", but for aspect ratios primarily, and sometimes for input type (mouse vs touchscreen). That is a common error, when site for mobile is displayed in a "mobile" version, EVEN when mobile is set to landscape mode and user awaits experience similar to desktop version. – xakepp35 Feb 14 '19 at 16:05

score 2 · Answer 2 · edited Jun 02 '17 at 12:32

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.

score 2 · Answer 3 · answered Mar 19 '14 at 02:47

2

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.

answered Mar 19 '14 at 02:47

c0d3fall

21
1

score 2 · Answer 4 · answered Apr 07 '18 at 08:20

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.

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

4 Answers4

Linked