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

I'm very surprised that there was no developer able to answer my question! Even on the github no one dared to think about it!

In fact, everything turned out to be very simple!

Yes, using the CDN we get the compiled css file. Styles in the bootstrap are written using sass. Moreover, the styles are written separation and modular. So it means that I do not need to load the entire bootstrap to my server. I want to deliver cached version of Bootstrap’s compiled CSS and I only need to add my breakpoints. Fortunately, there is a specific bootstrap file which is responsible for the Grid. It is bootstrap-grid.scss:

/*!
 * Bootstrap Grid v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@at-root {
  @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
}

html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

@import "functions";
@import "variables";

@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";

@import "grid";
@import "utilities/display";
@import "utilities/flex";

Now I just need to add sequentially the code from the files above adding my breakpoints. Add non-Grid code not necessary. For example, the code responsible for the color. Here is my mcve at codepen.