Breakpoint utilities
Utility classes are provided and can be used to hide and show content based on screen sizes.
Max Widths
These classes are used to set a max-width on a container
Utility Class | Description |
---|---|
.rc-max-width--sm | Sets a max-width of 300px on the container |
.rc-max-width--md | Sets a max-width of 768px on the container |
.rc-max-width--lg | Sets a max-width of 1100px on the container |
.rc-max-width--xl | Sets a max-width of 1400px on the container |
.rc-max-width--xxl | Sets a max-width of 1800px on the container |
.rc-full-width | Sets a max-width of 100% on the container |
Breakpoint Up
These classes are used to set a Breakpoint Up on a container
Utility Class | Description |
---|---|
.rc-xs-up | An element with this class will only show on devices which are 480px wide or wider |
.rc-sm-up | An element with this class will only show on devices which are 640px wide or wider |
.rc-md-up | An element with this class will only show on devices which are 768px wide or wider |
.rc-lg-up | An element with this class will only show on devices which are 960px wide or wider |
.rc-xl-up | An element with this class will only show on devices which are 1024px wide or wider |
.rc-xxl-up | An element with this class will only show on devices which are 1440px wide or wider |
Breakpoint Down
These classes are used to set a Breakpoint Down on a container
Utility Class | Description |
---|---|
.rc-xs-down | An element with this class will only show on devices which are 480px wide or smaller |
.rc-sm-down | An element with this class will only show on devices which are 640px wide or smaller |
.rc-md-down | An element with this class will only show on devices which are 768px wide or smaller |
.rc-lg-down | An element with this class will only show on devices which are 960px wide or smaller |
.rc-xl-down | An element with this class will only show on devices which are 1024px wide or smaller |
.rc-xxl-down | An element with this class will only show on devices which are 1440px wide or smaller |