Breakpoints Overview
The design system includes five breakpoints for responsive design. Resize your browser to see the breakpoint indicator in the bottom right corner.
| Breakpoint | Class Prefix | Dimensions |
|---|---|---|
| Extra small | xs |
< 576px |
| Small | sm |
≥ 576px |
| Medium | md |
≥ 768px |
| Large | lg |
≥ 992px |
| Extra large | xl |
≥ 1200px |
Responsive Display
Control element visibility at different breakpoints.
Only visible on extra small screens (xs)
Only visible on small screens (sm)
Only visible on medium screens (md)
Only visible on large screens (lg)
Only visible on extra large screens (xl)
<div class="sm-hidden">
Only visible on extra small screens
</div>
<div class="d-none sm-d-block md-hidden">
Only visible on small screens
</div>Responsive Grid
Grid columns that adapt to different screen sizes.
1
2
3
4
<div class="grid grid-cols-1 sm-grid-cols-2 md-grid-cols-3 lg-grid-cols-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>Responsive Column Spans
Column spans that change based on screen size.
Responsive column span
Responsive column span
<div class="grid grid-cols-12 gap-3">
<div class="col-span-12 md-col-span-6 lg-col-span-4">
Responsive column span
</div>
<div class="col-span-12 md-col-span-6 lg-col-span-8">
Responsive column span
</div>
</div>Responsive Spacing
Apply different spacing at different breakpoints.
Responsive padding
<div class="p-2 sm-p-3 md-p-4 lg-p-5">
Responsive padding
</div>Common Responsive Patterns
Examples of common responsive layout patterns.
Responsive Card Layout
Card 1
Card 2
Card 3
<div class="grid grid-cols-1 md-grid-cols-2 lg-grid-cols-3 gap-3">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>Responsive Design Best Practices
- Start with mobile-first approach
- Use breakpoint prefixes consistently
- Consider content rather than devices when choosing breakpoints
- Test across different screen sizes
- Use responsive utilities in combination with other utilities
Responsive Utilities Reference
Display Classes
{sm|md|lg|xl}-hidden{sm|md|lg|xl}-block{sm|md|lg|xl}-flex
Grid Classes
{sm|md|lg|xl}-grid-cols-{1-12}{sm|md|lg|xl}-col-span-{1-12}
Spacing Classes
{sm|md|lg|xl}-p-{1-5}{sm|md|lg|xl}-m-{1-5}