Width

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.

.w0

.w1

.w2

.w3

.w4

.w5

.w6

.w8

.w10

.w12

.w16

.w20

.w24

.w32

.w40

.w48

.w64

.w80

.w96

.w128

...

Percentage

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

.w-10

.w-20

.w-25

.w-30

.w-33

.w-40

.w-50

.w-60

.w-66

.w-70

.w-80

.w-90

.w-100

Responsive

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

Resize your browser window to see the changes

Customization

All width values can be adjusted in _settings.scss.

Variants

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.