title: How to add new, large breakpoint in Bootstrap 4 (CSS Only)
body: <p>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:</p>
  
  <pre><code>@media (min-width: 1200px) {
    .container {
       max-width: 1540px;
    }  
  }
  </code></pre>
  
  <p>But I want not just to expand the <code>xl max-width</code>. I wish to add a new full-fledged breakpoint, with all of BS4 grid possibilities, columns, display modes, spacing etc. Like <code>col-xxl</code> or something. As the result it should look like:</p>
  
  <pre><code>&lt;div class="col-xxl-2 col-xl-3 col-md-4 col-sm-6 text-xxl-center"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Any ideas, how to do it correctly using CSS?</p>