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