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.
<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">1</div>
<div class="d-w1">2</div>
<div class="d-w2">3</div>
<div class="d-w4">4</div>
<div class="d-w6">5</div>
<div class="d-w8">6</div>
<div class="d-w12">7</div>
<div class="d-w16">8</div>
<div class="d-w24">9</div>
<div class="d-w32">10</div>
<div class="d-w42">11</div>
<div class="d-w48">12</div>
<div class="d-w64">13</div>
<div class="d-w72">14</div>
<div class="d-w84">15</div>
<div class="d-w96">16</div>
<div class="d-w102">17</div>
<div class="d-w114">18</div>
<div class="d-w128">19</div>
<div class="d-w164">20</div>
<div class="d-w216">21</div>
<div class="d-w264">22</div>
<div class="d-w332">23</div>
<div class="d-w464">24</div>
<div class="d-w512">25</div>
<div class="d-w628">26</div>
<div class="d-w764">27</div>
<div class="d-w828">28</div>
<div class="d-w912">29</div>
<div class="d-w1024">30</div>
<div class="d-w1140">31</div>
<div class="d-w1268">32</div>
<div class="d-w1340">33</div>
Screen
Use d-w100vh
to have an element cover the user's viewport.
<div class="d-w100vw">...</div>
Auto
Use d-w-auto
have the browser calculate and select a width.
<div class="d-w-auto">...</div>