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

If you need just some part of CDN bootstrap adjusted and don't want to recompile you can add only relevant media boundaries. It's easier if you're adding breakpoints higher than -xl- (you load your .css update after you load bootstrap .css) or lower than xs (you load your .css update before bootstrap). Inserting a breakpoint in the middle is a little bit more tricky.

See https://www.codeply.com/p/ROF99teYDd where I've added -xxl- starting at 1550px and -mde- for 840-992px, purely in .css by duplicating required bootstrap media csss.

@media (min-width: 840px) and (max-width: 992px) {
 ...
 .col-mde-1 {
 -ms-flex: 0 0 8.333333%;
 flex: 0 0 8.333333%;
 max-width: 8.333333%;
 }
 .col-mde-2 {
   -ms-flex: 0 0 16.666667%;
   flex: 0 0 16.666667%;
   max-width: 16.666667%;
 }
 ...
 .col-mde-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
 }
}

@media (min-width: 1550px) {
 .col-xxl-1 {
   -ms-flex: 0 0 8.333333%;
   flex: 0 0 8.333333%;
   max-width: 8.333333%;
 }
...
}

Because of using min and max-width for the inserted elements, I need to specify the official bootstrap dimension for -lg- (min-width: 992px) to ensure the design doesn't break after this breakpoint.