Display
The Telerik and Kendo UI Display Utilities are CSS utility classes that enable you to specify the display type of an element.
| Utility Class | CSS Property |
|---|---|
.k-d-none | display: none; |
.k-d-contents | display: contents; |
.k-d-block | display: block; |
.k-d-inline | display: inline; |
.k-d-inline-block | display: inline-block; |
.k-d-flex | display: flex; |
.k-d-inline-flex | display: inline-flex; |
.k-d-grid | display: grid |
.k-d-inline-grid | display: inline-grid |
.k-d-table | display: table; |
.k-d-inline-table | display: inline-table; |
.k-d-list-item | display: list-item; |
.k-d-table-row | display: table-row; |
.k-d-table-cell | display: table-cell; |
Inline
Use the k-d-inline utility to display multiple elements on a single row.
Block
Use the k-d-block utility to display each element on a new row.
Flex
Use the k-d-flex utility to display the elements in a flex container.
None
Use the k-d-none utility to prevent elements from being displayed.
Breakpoints
The responsive Display utility classes let you specify the display type of an element. Each class is composed of a base name, followed by a breakpoint identifier (xs, sm, md, lg, xl, or xxl), and then a value or modifier.
| Utility Class | CSS Property |
|---|---|
.k-d-{xs|md|lg|xl|xxl}-none | display: none; |
.k-d-{xs|md|lg|xl|xxl}-contents | display: contents; |
.k-d-{xs|md|lg|xl|xxl}-block | display: block; |
.k-d-{xs|md|lg|xl|xxl}-inline | display: inline; |
.k-d-{xs|md|lg|xl|xxl}-inline-block | display: inline-block; |
.k-d-{xs|md|lg|xl|xxl}-flex | display: flex; |
.k-d-{xs|md|lg|xl|xxl}-inline-flex | display: inline-flex; |
.k-d-{xs|md|lg|xl|xxl}-grid | display: grid |
.k-d-{xs|md|lg|xl|xxl}-inline-grid | display: inline-grid |
.k-d-{xs|md|lg|xl|xxl}-table | display: table; |
.k-d-{xs|md|lg|xl|xxl}-inline-table | display: inline-table; |
.k-d-{xs|md|lg|xl|xxl}-list-item | display: list-item; |
.k-d-{xs|md|lg|xl|xxl}-table-row | display: table-row; |
.k-d-{xs|md|lg|xl|xxl}-table-cell | display: table-cell; |
