How to create new breakpoints in bootstrap 4 using CDN?

Question

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:

--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;

I want to get something like this:

I found the manual and I'm trying this:

$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;
}

But it doesn't produce results, and generates bug:

Illegal nesting: Nothing may be nested beneath variable declarations.

Codepen mcve.

What I'm doing wrong?
Thank you in advance for your help.

---

UPD: if that is not possible... Is there any alternative? Can I easily edit my code to simulate bootstrap grid with my breakpoints?

---

UPD2: I fixed the bugs thanks to @aer0:

$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

But it doesn't solve my problem.

Answer 1

It can't be done entirely from CDN. To properly customize/override using SASS, you need to @import the necessary Bootstrap scss files in your custom.scss. To override the grid-breakpoints, at a minimum you need functions and variables. Then set the variables as needed, and finally @import bootstrap. Notice how default! has been removed as explained in the docs as the correct customization method.

/* import what we need to override */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* set the overriding variables */
$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
);
$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
);

/* override the !default vars with the values we set above */
@import "bootstrap";

With this method, we've added the new grid breakpoints, and ensured these new breakpoints work everywhere in Bootstrap including the grid, responsive utilities for spacing, display, flexbox, alignment, positioning, etc...

https://codeply.com/go/BIgmm1XGc2

Also see:
How to extend/modify (customize) Bootstrap 4 with SASS
Twitter Bootstrap: add media queries for xxs breakpoint