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 |