Loading lessons...
Display
Display
Display utilities control how an element is shown.
Common display values
| Class | CSS |
|---|---|
block | display: block |
inline-block | display: inline-block |
inline | display: inline |
flex | display: flex |
inline-flex | display: inline-flex |
grid | display: grid |
inline-grid | display: inline-grid |
contents | display: contents |
flow-root | display: flow-root |
hidden | display: none |
Table displays
table, table-caption, table-cell, table-column, table-row, table-header-group, table-footer-group, table-row-group, inline-table, and list-item also exist.
Hiding an element
hidden removes the element from the layout entirely (display: none):
<div class="hidden md:block">Visible on medium screens and up</div>Screen-reader-only content
sr-only visually hides content while keeping it available to screen readers (a 1px box with clip-path). not-sr-only undoes it.
<span class="sr-only">Loading...</span>A note on replaced elements
Preflight makes images display: block. Use inline to make them inline again:
<img class="inline" src="..." alt="..." />TL;DR
block,inline,flex,grid,hidden, and more.hidden= display none.sr-onlyhides visually but keeps for screen readers.flexandgridare display values, not separate systems.