Bootstrap: Add XXL breakpoint

[aciokv]

1140px is way to small on an 1900+ display.

Please add an new grid size for XXL displays

[tomlutzenberger]

See http://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints

[cvrebert]

I am reasonably sure that adding yet more breakpoints has already been proposed and rejected, though my search-fu is failing me.
@mdo Could you confirm?

[mdo]

Yup, not something we're adding on our end. Feel free to customize it yourself.

[jackdaniel9]

+1 What is the reason.

We have 720px difference between 1200px and 1920px. It's hard to build website with good appaearance with 1200px and 1920px.

So if we have :

1200px with good column but in 1920px the colum is too large.
1200px with very small column and in 1920px the colum is good.

[tomlutzenberger]

@jackdaniel9 Since I'm using bootstrap I always changed the amount of columns from 12 to 24 at the begin of every project to be more flexible and handle such problems.
Give it a try.

[maccurt]

I agree when you have a large screen, which people do have now the the cols are to big for xl, there should be a XXL.. this idea that you have to do all this customization is fine and I shall do that, but I think at this point it is time to add it.

[aaronfranke]

@tomlutzenberger How do you do that?

[o-alquimista]

I would prefer to have the XXL breakpoint by default, but it's very simple to add a new breakpoint. ~It's not documented properly _(someone's gotta write an issue about it)_, but I've found the information on the v4 migration docs.~

Copy the variables $container-max-widths and $grid-breakpoints to your Sass file, remove !default from them and define the new breakpoint on both. Notice the pixel size is a little smaller on the former variable.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1400px
);

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1500px
);

Set these variables before importing Bootstrap, build the assets and voilà. You can now use classes such as row-cols-xxl-5.

---

Update: This was already documented here.

To @aaronfranke: here's how to change the number of grid columns (in case you haven't found it yet).