---
title: Display
position: 5
seo_title: Telerik and Kendo UI Display Utilities
seo_description: Use the Telerik and Kendo UI Display utilities to specify the
  display type of an element.
---

## Display

The Telerik and Kendo UI Display Utilities are CSS utility classes that enable you to specify the display type of an element.

<CSSRulesList data='{"id":"display"}'></CSSRulesList>

### Inline

Use the `k-d-inline` utility to display multiple elements on a single row.

<LiveDemo data='{"links":[],"demo":"utils/layout/display/inline","height":100,"codePreviewSettings":{"ignoreClassNames":"k-font-italic k-font-extrabold","filterSelector":".k-text-white"}}'></LiveDemo>

### Block

Use the `k-d-block` utility to display each element on a new row.

<LiveDemo data='{"links":[],"demo":"utils/layout/display/block","height":100,"codePreviewSettings":{"ignoreClassNames":"k-font-italic k-font-extrabold"}}'></LiveDemo>

### Flex

Use the `k-d-flex` utility to display the elements in a flex container.

<LiveDemo data='{"links":[],"demo":"utils/layout/display/flex","height":150,"codePreviewSettings":{"ignoreClassNames":"k-w-full k-border-solid k-border-2 k-border-black k-w-20 k-h-20 k-m-1"}}'></LiveDemo>

### None

Use the `k-d-none` utility to prevent elements from being displayed.

<LiveDemo data='{"links":[],"demo":"utils/layout/display/none","height":150,"codePreviewSettings":{"ignoreClassNames":"k-w-full k-border-solid k-border-2 k-border-black k-w-20 k-h-20 k-m-1"}}'></LiveDemo>

### 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.

<CSSRulesList data='{"id":"display-responsive"}'></CSSRulesList>