How to add custom breakpoints in bootstrap4 and how to use responsive breakpoint mixins in scss

Question

I am working on an angular 5 application which needs to be a responsive app. I am facing problem to make it reponsive in 1366X768 and 1920X1080 resolutions where in font sizes are different.

Problem 1: I have overidden breakpoints in my style.scss as follow :

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl:1900px //this is custom breakpoint; after compiling bootstrap does generates col-xxl-* classes
);

I have added xxl as new breakpoint. Now when I add col-xxl-* class to any of my element, that element takes full width jusy like what col-12 does. Refer image below :

For container having border red,I have given col-xxl-3 class; however it still having full width. Why its resonsive grid classes related to col-*-3 not getting applied. I think it should generate css like below:

.col-xxl-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
} 

But it doesn't. Am I doing something wrong ?

Problem 2

From this bootstrap responsive breakpoints , we can use mixins for targeting different resolutions. So in component level scss I have used these mixins as below :

@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/_mixins.scss';

span.work_catalog {
    @include media-breakpoint-up(xl) { //this will target all above 1200 px as per bootstrap documentation; so this works as u see red border in above image
       border:1px solid red;
    }
}

but when I used it like below :

 span.work_catalog {
        @include media-breakpoint-up(xxl) { 
           border:1px solid red;
        }
    }

this still gets applied for resolution more than 1200px; What I assume that above css should only gets applied for above 1900px as I have added custom grid breakpoint in my style.scss. Am I missing something here?

Answer 1

You can add a new xxl breakpoint like this. Make sure you @import bootstrap after setting the custom grid-breakpoints...

@import "bootstrap/functions";
@import "bootstrap/variables";

$grid-breakpoints: (
  xs: 0,
  sm: 567px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1900px
);

$container-max-widths: (
  sm: 567px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1900px
);

 @import "bootstrap";

Demo: https://www.codeply.com/go/jus43PxWAU

Then the appropriate xxl-* classes will be generated...

@media (min-width: 1900px) {
    .col-xxl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

For the custom mixin classes, define those after you @import bootstrap...

@import "bootstrap";

span.work_catalog {
    @include media-breakpoint-up(xxl) { 
       border:1px solid red;
    }
}

Demo: https://www.codeply.com/go/jus43PxWAU (notice the demo sets the xxl breakpoint as 1366px) so when the screen is wider than xxl, .work_catalog has the expected red border.