Display Utilities

Display Utilities

Display utilities switch an element between block, inline, flex, grid, table, and hidden states at chosen breakpoints.

Core concept

Explain d-none, d-block, d-inline, d-inline-block, d-flex, d-inline-flex, and d-grid. Show how responsive display classes can replace small media-query rules.

Using it in a real interface

A mobile menu trigger may be visible below a breakpoint while a desktop navigation is visible above it. Explain how two display rules can create that responsive transition without JavaScript.

Implementation notes

Remember that display:none removes an element from the normal visual layout and generally from the accessibility tree. Do not hide important content simply to make a desktop design fit a phone.