Display Helpers
Display helpers control how elements participate in layout and when they are visible across breakpoints. This page owns responsive visibility patterns such as d-md-none so Flexbox can stay focused on axis, alignment, and item sizing.
Usage
Pick a base display mode, optionally add one responsive override, and copy the resulting class list.
Class syntax
Display helpers are composed as d-{value} for base behavior and d-{breakpoint}-{value} for responsive overrides.
Base classes
Use d-block, d-inline, d-inline-block, d-flex, d-inline-flex, or d-none.
Breakpoint overrides
Prefix with sm, md, lg, or xl to override display from that breakpoint and above.
Mobile-first cascade
Later breakpoints override previous display declarations in ascending order.
Implementation examples
Display helpers are composed as d-{value} for base behavior and d-{breakpoint}-{value} for responsive overrides.
Desktop navigation only
Hide a navigation block on small screens and reveal it from md upward.
Mobile action only
Show a compact action below md and hide it at larger breakpoints.
Inline badge promoted to block
Keep inline text rhythm on small screens and promote to block at xl.
Breakpoint reference
Use this table as the canonical breakpoint map when composing responsive display classes.
| Device | Token | Typical devices | Range |
|---|---|---|---|
| Extra small | xs | Small to large phone | < 600px |
| Small | sm | Small to medium tablet | 600px > < 840px |
| Medium | md | Large tablet to laptop | 840px > < 1145px |
| Large | lg | Laptop to desktop | 1145px > < 1545px |
| Extra large | xl | 1080p to 1440p desktop | 1545px > |
Framework notes
These notes clarify how display helpers interact with other utility pages.
- Display helpers own visibility and breakpoint concerns for utility documentation.
- Flexbox documentation focuses on direction, alignment, wrapping, and item sizing.
- Compose display and flex helpers together when a layout needs both visibility rules and axis control, for example
d-none d-md-flex items-center.