I faced a problem, when extra large Bootsrap 4 max container width, which is 1140px, is not wide enough. Because I want my websites looks good on big monitors too, and bootstrap grid is extremely narrow. The easiest way is to expand maximum width is to overwrite the .container max-width, like:

```
@media (min-width: 1200px) {
  .container {
     max-width: 1540px;
  }  
}

```

But I want not just to expand the `xl max-width`. I wish to add a new full-fledged breakpoint, with all of BS4 grid possibilities, columns, display modes, spacing etc. Like `col-xxl` or something. As the result it should look like:

```
<div class="col-xxl-2 col-xl-3 col-md-4 col-sm-6 text-xxl-center"></div>

```

Any ideas, how to do it correctly using CSS?