title: How to create new breakpoints in bootstrap 4 using CDN?
body: <p>I use BootstrapCDN. Other styles written in sass and built by gulp. I need to create my own breakpionts. Is it possible to make them if I use CDN? I can't figure out how to do it. I have to create these breakpoints:</p>
  
  <pre><code>--breakpoint-xxxs: 0;
  --breakpoint-xxs: 320px;
  --breakpoint-xs: 568px;
  --breakpoint-sm: 667px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440px;
  --breakpoint-xxxl: 1600px;
  </code></pre>
  
  <p>I want to get something like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  
  &lt;div class="container"&gt;
   &lt;div class="row"&gt;
    &lt;div class="col col-xxxs-1 col-xxs-2 col-xs-3 col-sm-4 col-md-5 col-lg-6 col-xl-7 col-xxl-8 col-xxxl-9"&gt;
     &lt;div style="height:100vh;background:purple"&gt;text&lt;/div&gt;
    &lt;/div&gt;&lt;!--col--&gt;
   &lt;/div&gt;&lt;!--.row--&gt;
  &lt;/div&gt;&lt;!--.container--&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I found <a href="http://blog.codeply.com/2016/06/06/how-to-create-a-new-breakpoint-in-bootstrap-4/" rel="noreferrer">the manual</a> and I'm trying this:</p>
  
  <pre><code>$grid-breakpoints: (
    xxxs: 0,
    xxs: 320px,
    xs: 568px,
    sm: 667px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1440px,
    xxxl: 1600px
  )  !default;
  
  $container-max-widths: (
    xxxs: 0,
    xxs: 320px,
    xs: 568px,
    sm: 667px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1440px,
    xxxl: 1600px
  ) !default;
  
  :root {
    --breakpoint-xxxs: 0;
    --breakpoint-xxs: 320px;
    --breakpoint-xs: 568px;
    --breakpoint-sm: 667px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1440px;
    --breakpoint-xxxl: 1600px;
  }
  </code></pre>
  
  <p>But it doesn't produce results, and generates bug:</p>
  
  <blockquote>
    <p>Illegal nesting: Nothing may be nested beneath variable declarations.</p>
  </blockquote>
  
  <p><a href="https://codepen.io/kizoso/pen/oEyeVd" rel="noreferrer">Codepen mcve</a>.</p>
  
  <p>What I'm doing wrong?<br>
  Thank you in advance for your help.</p>
  
  <hr>
  
  <p>UPD: if that is not possible... Is there any alternative? Can I easily edit my code to simulate bootstrap grid with my breakpoints? </p>
  
  <hr>
  
  <p>UPD2: I fixed the bugs thanks to <a href="https://stackoverflow.com/questions/48924751/how-to-create-new-breakpoints-in-bootstrap-4-using-cdn/48925128#48925128">@aer0</a>:</p>
  
  <pre><code>$grid-breakpoints: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default
  
  $container-max-widths: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default
  
  \:root
    --breakpoint-xxxs: 0
    --breakpoint-xxs: 320px
    --breakpoint-xs: 568px
    --breakpoint-sm: 667px
    --breakpoint-md: 768px
    --breakpoint-lg: 992px
    --breakpoint-xl: 1200px
    --breakpoint-xxl: 1440px
    --breakpoint-xxxl: 1600px
  </code></pre>
  
  <p>But it doesn't solve my problem.</p>