Cannot add custom $grid-breakpoints

[de1mat]

I have added another custom breakpoint like so:

$grid-breakpoints: (
	xs:  0,
	sm:  576px,
	md:  768px,
	lg:  992px,
	xl:  1200px,
	xxl: 1450px
) !default;

And it works fine at the SCSS level. But when I try to device a CCol with the xxl size, it does not get added to the generated HTML class output. And the reason is because of the interface for the CCol class which is defined like so...

interface CCol extends HTMLProps<any> {
  children?: ChildElement;
  tag?: any;
  className?: string;
  innerRef?: object | Function | string;
  xs?: columnProps;
  sm?: columnProps;
  md?: columnProps;
  lg?: columnProps;
  xl?: columnProps;
  widths?: Array<any>;
}

So with the xxl={4} being set in JSX, I will get the following output <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"> (notice that col-xxl-4 is missing).

But if I use the Inspector to update the DOM and manually add the class name like so ... <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-4"> then everything works fine. So it is literally just an issue with CoreUI not allowing col-xxl-? to be passed through.

This kind of defeats the purpose of being able to customise the breakpoints if CoreUI does not allow them to be extended. Not sure what the ultimate solution is, but in the short term is there any chance you could update the TypeScript Interface to allow xxl?: columnProps; to be defined?

In this day and age with ultra large monitors, stopping at xl is just not flexible enough.

[woothu]

Hi! Thank you for this report!

We have added xxl breakpoint as default in 3.0.6 release. Typings are also changed.

BTW. We will add xxl breakpoint by default to our CSS library in the next version.

Regards!

[de1mat]

Thank you so much 👍