Width

The Width utility classes are used to define the width of an element using various units such as pixels, percentages, or viewport width. These classes help you create consistent layouts, control content flow, and ensure responsive design across devices.

Width in Pixels

The Width in Pixels utility classes set a fixed width on an element using pixel values. These classes are useful when you need precise control over an element's width regardless of the screen size or container.

Definition and Usage

Example

Note

The range of this property is from 1 to 100.

Width in Percentage

The Width in Percentage utility classes define the width of an element as a percentage of its parent container. This is ideal for creating responsive layouts that adjust naturally based on screen size or parent dimensions.

Definition and Usage

Example

Note

This property gives width as a percentage of the parent element's width. The parent element must have a defined width for percentage-based widths to work correctly.

The range of this property is from 1 to 100.

width in Viewport

The Width in Viewport Width utility classes set the width of an element based on a percentage of the viewport's total width. This is especially useful for creating full-width or screen-relative designs that remain consistent across devices.

Definition and Usage

Example

Note

This property is useful when ensuring sections fill a specific portion of the screen regardless of content.

The range of this property is from 1 to 100.

The Min-Width utility classes define the minimum width an element can shrink to. These classes are helpful in responsive design to prevent elements from becoming too narrow, especially in flexible or fluid layouts.

min-width in Pixels

The Min-Width in Pixels utility classes set a fixed minimum width on an element using pixel values. This ensures that the element does not shrink below the specified width, maintaining visual consistency and usability—especially in responsive layouts.

Definition and Usage

Example

Note

Use this when you need reliable width limits across components like cards, sections, or modals.

The range of this property is from 1 to 100.

min-width in Percentage

The Min-Width in Percentage utility classes define the minimum width of an element as a percentage of its parent container. This ensures that the element maintains a baseline width relative to its container, which is especially useful in responsive and fluid layouts.

Definition and Usage

Example

Note

Combine with max-width or width classes to fine-tune element sizing.

The range of this property is from 1 to 100.

min-width in Viewport

The Min-Width in Viewport Width utility classes set the minimum width of an element based on the width of the browser’s viewport. This ensures the element retains a screen-relative minimum width, making it ideal for full-width layouts or sections that should never shrink too small on any device.

Definition and Usage

Example

Note

This property is useful when ensuring sections fill a specific portion of the screen regardless of content.

The range of this property is from 1 to 100.

The Max-Width utility classes define the maximum width an element can expand to. These classes help maintain layout control by preventing elements from stretching beyond a desired limit—ensuring better readability and design consistency across screen sizes.

max-width in Pixels

The Max-Width in Pixels utility classes restrict the width of an element to a fixed pixel value. This ensures that elements don’t exceed a certain width, which is especially useful for maintaining readability, layout stability, and consistent visual design across different screen sizes.

Definition and Usage

Example

Note

Pair with overflow: auto or overflow-y: scroll to enable internal scrolling when content exceeds the max height.

The range of this property is from 1 to 100.

max-width in Percentage

The Max-Width in Percentage utility classes set a maximum width on an element as a percentage of its parent container. This approach is useful for responsive layouts where you want elements to scale but not exceed a certain portion of their container.

Definition and Usage

Example

Note

The parent element must have a defined height for percentage-based heights to work correctly. Use this when working with flex or grid layouts that rely on proportional sizing.

The range of this property is from 1 to 100.

min-width in Viewport

The Max-Width in Viewport Width utility classes set the maximum width of an element relative to the width of the browser’s viewport. This is especially useful for creating responsive layouts that scale with screen size but stay within defined limits.

Definition and Usage

Example

Note

This property is useful when ensuring sections fill a specific portion of the screen regardless of content.

The range of this property is from 1 to 100.