Utilities for setting the width of an element.

Class Properties
.w0 width: 0;
.w1 width: 0.25rem;
.w2 width: 0.5rem;
.w3 width: 0.75rem;
.w4 width: 1rem;
.w5 width: 1.25rem;
.w6 width: 1.5rem;
.w8 width: 2rem;
.w10 width: 2.5rem;
.w12 width: 3rem;
.w16 width: 4rem;
.w20 width: 5rem;
.w24 width: 6rem;
.w32 width: 8rem;
.w40 width: 10rem;
.w48 width: 12rem;
.w64 width: 16rem;
.w80 width: 20rem;
.w96 width: 24rem;
.w128 width: 32rem;
.w160 width: 40rem;
.w192 width: 48rem;
.w256 width: 64rem;
.w320 width: 80rem;
.w384 width: 96rem;
.w512 width: 128rem;
.w640 width: 160rem;
.w768 width: 192rem;
.w-10 width: 10%;
.w-20 width: 20%;
.w-25 width: 25%;
.w-30 width: 30%;
.w-33 width: 33.33%;
.w-40 width: 40%;
.w-50 width: 50%;
.w-60 width: 60%;
.w-66 width: 66.66%;
.w-70 width: 70%;
.w-80 width: 80%;
.w-90 width: 90%;
.w-100 width: 100%;
.w-auto width: auto;
.w-fit-content width: fit-content;
.w-inherit width: inherit;
.w-initial width: initial;
.w-max-content width: max-content;
.w-min-content width: min-content;
.w-unset width: unset;

Fixed width

Use .w{step} to set an element to a fixed width.



Use .w-{percentage} to set an element to a percental width.



To change the width at a specific breakpoint, add @{breakpoint} add the end of the utility.

Resize your browser window to see the changes


All width values can be adjusted in _settings.scss.


By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.