# Bootstrap 6 Width
> Set an element's width relative to its parent or to the viewport with our width utilities.
## Relative to the parent
Width utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
```html
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
```
## Fixed widths
`.w-1` through `.w-12` set a width from the `$sizes` map, one `--cui-spacer` (1rem) per step, computed in the browser, for boxes that should hold their size whatever the parent does — an avatar column, a fixed label, a swatch.
```html
.w-4
.w-8
.w-12
```
## Max width
Use `.max-w-100` to cap an element at the width of its parent — the usual reason to reach for it is an image or an SVG that would otherwise overflow.
```html
```
## Min width
`.min-w-0` and `.min-w-100` set a floor rather than a cap.
`.min-w-0` is the one you reach for most. A flex or grid child starts at `min-width: auto`, which refuses to shrink below its own content — and a `.text-truncate` child never breaks its line, so its content width is the whole string. The item pushes past its track instead of ellipsizing. Dropping the floor to `0` lets it shrink so the truncation can happen.
```html
Without a floor this line pushes the button out of the box
With .min-w-0 the same line truncates instead
```
## Relative to the viewport
`.vw-100` sets the width to the full viewport, `.min-vw-100` sets it as a floor.
```html
Min-width 100vw
Width 100vw
```
## Dynamic viewport width
A mobile browser resizes the viewport as it shows or hides its URL bar, so `vw` units can end up wider than the visible area. The `dvw` unit tracks that change instead of the largest possible viewport.
```html
Min-width 100dvw
Width 100dvw
```
## Intrinsic widths
Size an element from its content instead of its container: `.w-min` (the widest unbreakable word), `.w-max` (the full unwrapped content), `.w-fit` (the content, capped at the container).
```html
Min width
Max width
Fit width
```
## Customizing
### Sass maps
Each entry is one `.w-{step}` class and the width it sets. Add a key to define a step, or set one to `null` to drop it:
```scss
$sizes: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$sizes: defaults(
(
1: var(--cui-spacer),
2: calc(var(--cui-spacer) * 2),
3: calc(var(--cui-spacer) * 3),
4: calc(var(--cui-spacer) * 4),
5: calc(var(--cui-spacer) * 5),
6: calc(var(--cui-spacer) * 6),
7: calc(var(--cui-spacer) * 7),
8: calc(var(--cui-spacer) * 8),
9: calc(var(--cui-spacer) * 9),
10: calc(var(--cui-spacer) * 10),
11: calc(var(--cui-spacer) * 11),
12: calc(var(--cui-spacer) * 12)
),
$sizes
);
```
### Utilities API
Width utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.](https://coreui.io/bootstrap/docs/utilities/api/#using-the-api)
```scss
"width": (
property: width,
class: w,
values: map.merge(
$sizes,
(
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto,
min: min-content,
max: max-content,
fit: fit-content
)
)
),
"max-width": (
property: max-width,
class: max-w,
values: (100: 100%)
),
"min-width": (
property: min-width,
class: min-w,
values: (
0: 0,
100: 100%,
)
),
"viewport-width": (
property: width,
class: vw,
values: (100: 100vw)
),
"min-viewport-width": (
property: min-width,
class: min-vw,
values: (100: 100vw)
),
"dynamic-viewport-width": (
property: width,
class: dvw,
values: (100: 100dvw)
),
"min-dynamic-viewport-width": (
property: min-width,
class: min-dvw,
values: (100: 100dvw)
),
```