# Display

Set the display box type of an element.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 1 · Edge 12 · Firefox 1 · Safari 1

| Class | Properties | Value |
|-------|------------|-------|
| `d:b` | display | `block` |
| `d:f` | display | `flex` |
| `d:fr` | display | `flow-root` |
| `d:g` | display | `grid` |
| `d:i` | display | `inline` |
| `d:ib` | display | `inline-block` |
| `d:if` | display | `inline-flex` |
| `d:ig` | display | `inline-grid` |
| `d:it` | display | `inline-table` |
| `d:none` | display | `none` |
| `d:t` | display | `table` |
| `d:tc` | display | `table-cell` |
| `d:tco` | display | `table-column` |
| `d:tr` | display | `table-row` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `d:b` | display | `block` |
| `d:f` | display | `flex` |
| `d:fr` | display | `flow-root` |
| `d:g` | display | `grid` |
| `d:i` | display | `inline` |
| `d:ib` | display | `inline-block` |
| `d:if` | display | `inline-flex` |
| `d:ig` | display | `inline-grid` |
| `d:it` | display | `inline-table` |
| `d:none` | display | `none` |
| `d:t` | display | `table` |
| `d:tc` | display | `table-cell` |
| `d:tco` | display | `table-column` |
| `d:tr` | display | `table-row` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `d:b` | display | `block` |
| `d:f` | display | `flex` |
| `d:fr` | display | `flow-root` |
| `d:g` | display | `grid` |
| `d:i` | display | `inline` |
| `d:ib` | display | `inline-block` |
| `d:if` | display | `inline-flex` |
| `d:ig` | display | `inline-grid` |
| `d:it` | display | `inline-table` |
| `d:none` | display | `none` |
| `d:t` | display | `table` |
| `d:tc` | display | `table-cell` |
| `d:tco` | display | `table-column` |
| `d:tr` | display | `table-row` |