Variables
Canonical Breakpoints
We have five primary breakpoint variables. Each of these is supported by generated style utilities for common uses like margin and padding and display.
Each variable has a "max" counterpart, which applies to any screen sizes below the breakpoint. The "max" versions use the suffix Max. For example, the "max" version of --breakpointLg is --breakpointLgMax.
--breakpointXs(>= 375px)--breakpointSm(>= 480px)--breakpointMd(>= 768px)--breakpointLg(>= 1024px)--breakpointXl(>= 1280px)--breakpointXxl(>= 1600px)Functional Breakpoints
Functional breakpoints are aliases for the canonical versions tied to particular UI components.
Each variable has a "max" counterpart, which applies to any screen sizes below the breakpoint. The "max" versions use the suffix Max. For example, the "max" version of --breakpointCrateLayout is --breakpointCrateLayoutMax.
--breakpointCrateLayout(>= 1024px)The point at which the layout crates flip from a stacked to a two-column design. Alias of --breakpointLg.
--breakpointMaxWidthExternalGutters(>= 1520px)Extra large width plus the size of the standard global gutters at this breakpoint Alias of --.