Width

Utilities to control an element's width.

Percentages

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

<div class="d-w10p">d-w10p</div>
<div class="d-w20p">d-w20p</div>
<div class="d-w25p">d-w25p</div>
<div class="d-w30p">d-w30p</div>
<div class="d-w40p">d-w40p</div>
<div class="d-w50p">d-w50p</div>
<div class="d-w60p">d-w60p</div>
<div class="d-w70p">d-w70p</div>
<div class="d-w75p">d-w75p</div>
<div class="d-w80p">d-w80p</div>
<div class="d-w90p">d-w90p</div>
<div class="d-w100p">d-w100p</div>

Fixed

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

<div class="d-w0">...</div>
<div class="d-w1">...</div>
<div class="d-w2">...</div>
<div class="d-w4">...</div>
<div class="d-w6">...</div>
<div class="d-w8">...</div>
<div class="d-w12">...</div>
<div class="d-w16">...</div>
<div class="d-w20">...</div>
<div class="d-w24">...</div>
<div class="d-w32">...</div>
<div class="d-w42">...</div>
<div class="d-w48">...</div>
<div class="d-w64">...</div>
<div class="d-w72">...</div>
<div class="d-w84">...</div>
<div class="d-w96">...</div>
<div class="d-w102">...</div>
<div class="d-w114">...</div>
<div class="d-w128">...</div>
<div class="d-w164">...</div>
<div class="d-w216">...</div>
<div class="d-w264">...</div>
<div class="d-w332">...</div>
<div class="d-w464">...</div>
<div class="d-w512">...</div>
<div class="d-w628">...</div>
<div class="d-w764">...</div>
<div class="d-w828">...</div>
<div class="d-w912">...</div>
<div class="d-w1024">...</div>
<div class="d-w1140">...</div>
<div class="d-w1268">...</div>
<div class="d-w1340">...</div>

Screen

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

<div class="d-h100vh d-w100vw">...</div>

Auto

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

<div class="d-w-auto">...</div>

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-w20 width: 20px !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-w384 width: 384px !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: 100vw !important;
.d-w-auto width: auto !important;
.d-w-unset width: unset !important;
.d-w-fit-content width: fit-content !important;
.d-w-max-content width: max-content !important;
.d-w-min-content width: min-content !important;
Width documentation last updated Thursday, June 11, 2026