Width

Utilities to control an element's width.

Classes

Class Output
.d-w10p width: 10% !important;
.d-w20p width: 20% !important;
.d-w25p width: 25% !important;
.d-w30p width: 30% !important;
.d-w40p width: 40% !important;
.d-w50p width: 50% !important;
.d-w60p width: 60% !important;
.d-w70p width: 70% !important;
.d-w75p width: 75% !important;
.d-w80p width: 80% !important;
.d-w90p width: 90% !important;
.d-w100p width: 100% !important;
.d-w0 width: 0px !important;
.d-w1 width: 1px !important;
.d-w2 width: 2px !important;
.d-w4 width: 4px !important;
.d-w6 width: 6px !important;
.d-w8 width: 8px !important;
.d-w12 width: 12px !important;
.d-w16 width: 16px !important;
.d-w24 width: 24px !important;
.d-w32 width: 32px !important;
.d-w42 width: 42px !important;
.d-w48 width: 48px !important;
.d-w64 width: 64px !important;
.d-w72 width: 72px !important;
.d-w84 width: 84px !important;
.d-w96 width: 96px !important;
.d-w102 width: 102px !important;
.d-w114 width: 114px !important;
.d-w128 width: 128px !important;
.d-w164 width: 164px !important;
.d-w216 width: 216px !important;
.d-w264 width: 264px !important;
.d-w332 width: 332px !important;
.d-w464 width: 464px !important;
.d-w512 width: 512px !important;
.d-w628 width: 628px !important;
.d-w764 width: 764px !important;
.d-w828 width: 828px !important;
.d-w912 width: 912px !important;
.d-w1024 width: 1024px !important;
.d-w1140 width: 1140px !important;
.d-w1268 width: 1268px !important;
.d-w1340 width: 1340px !important;
.d-w100vw width: 100vh !important;
.d-w-auto width: auto !important;
.d-w-unset width: unset !important;

Percentages

Use d-w{n}p to set a percentage width for an element.

Fixed

Use d-w{n} to set a fixed width for an element.

Screen

Use d-w100vh to have an element cover the user's viewport.

Auto

Use d-w-auto have the browser calculate and select a width.