Breakpoints
Report an Issue
Join the Slack Discussion
We have defined commonly used breakpoints to make development for all screen sizes more efficient. These variables are used through our grid and spacing class names.
| Variable | Viewport Width | Viewports |
|---|---|---|
na |
0px | n/a |
xs |
480px | Extra Small / Mobile Devices |
sm |
600px | Small / Mobile Devices |
md |
768px | Medium / Tablet devices |
lg |
1024px | Large / Desktop or laptop devices |
xl |
1280px | Extra Large / Presentation Mode |