---
title: Width
position: 2
seo_title: Telerik and Kendo UI Width Utilities
seo_description: Use the Telerik and Kendo UI Width utilities to configure the
  width of an element.
---
## Width

The Telerik and Kendo UI Width Utilities are CSS utility classes that enable you to control the width of an element.

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

### Fixed

Use the `k-w-{value}` utility to set a fixed width to an element.

<LiveDemo data='{"links":[],"demo":"utils/sizing/width/fixed","codePreviewSettings":{"filterSelector":".k-bg-primary","ignoreClassNames":"k-h-full k-border-solid k-border-black k-text-white k-text-center"},"height":300}'></LiveDemo>

### Full

Use the `k-w-full` utility to make the element expand to 100% of its parent's width.

<LiveDemo data='{"links":[],"demo":"utils/sizing/width/full","codePreviewSettings":{"ignoreClassNames":"k-h-full k-border-solid k-border-black k-text-white k-text-center k-h-1/2 k-d-flex k-flex-col k-align-items-center"},"height":200}'></LiveDemo>

### Screen

Use the `k-w-screen` utility to make the element expand to 100% of the viewport width.

<LiveDemo data='{"links":[],"demo":"utils/sizing/width/screen","codePreviewSettings":{"ignoreClassNames":"k-h-full k-border-solid k-border-black k-text-white k-text-center k-h-1/2 k-d-flex k-flex-col k-align-items-center"},"height":200}'></LiveDemo>

### Minimum

Use the `k-w-min-{width}` utility to set a minimum width to an element.

<LiveDemo data='{"links":[],"demo":"utils/sizing/width/minimum","codePreviewSettings":{"ignoreClassNames":"k-h-full k-border-solid k-border-black k-text-white k-text-center k-h-1/2 k-d-flex k-flex-col k-align-items-center"},"height":250}'></LiveDemo>

### Maximum

Use the `k-w-max-{width}` utility to set a maximum width to an element.

<LiveDemo data='{"links":[],"demo":"utils/sizing/width/maximum","codePreviewSettings":{"ignoreClassNames":"k-h-full k-border-solid k-border-black k-text-white k-text-center k-h-1/2 k-d-flex k-flex-col k-align-items-center"},"height":250}'></LiveDemo>