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

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