Width
Use these utility classes to quickly set the width (percentage and fixed width), minimum width, and maximium width for elements.
Percentage Widths
These utility classes give an element a percentage value. The element will fill the available space up to the percentage given after the element's content is displayed. Meaning, if you've given an element a width of 10%, but the element needs more than 10% for its content, the element will be greater than 10%. To force the element to a specific width, you must give it a fixed value.
The table below lists the class names, percentage, and the CSS output.
| Class | Percantage | Output |
|---|---|---|
| .d-width0 | 0 | width: 0; |
| .d-width10 | 10% | width: 10%; |
| .d-width20 | 20% | width: 20%; |
| .d-width25 | 25% | width: 25%; |
| .d-width30 | 30% | width: 30%; |
| .d-width40 | 40% | width: 40%; |
| .d-width50 | 50% | width: 50%; |
| .d-width60 | 60% | width: 60%; |
| .d-width70 | 70% | width: 70%; |
| .d-width75 | 75% | width: 75%; |
| .d-width80 | 80% | width: 80%; |
| .d-width90 | 90% | width: 90%; |
| .d-width100 | 100% | width: 100%; |
<div class="d-width0">.d-width0</div>
<div class="d-width10">.d-width10</div>
<div class="d-width20">.d-width20</div>
<div class="d-width25">.d-width25</div>
<div class="d-width30">.d-width30</div>
<div class="d-width40">.d-width40</div>
<div class="d-width50">.d-width50</div>
<div class="d-width60">.d-width60</div>
<div class="d-width70">.d-width70</div>
<div class="d-width75">.d-width75</div>
<div class="d-width80">.d-width80</div>
<div class="d-width90">.d-width90</div>
<div class="d-width100">.d-width100</div>Fixed Widths
These utility classes give an element a specific value (versus a percentage of the available space). The table below lists the class names, pixel values, and the CSS output.
| Class | Pixel | Output |
|---|---|---|
| .d-width1 | 108px | width: 10.8rem; |
| .d-width2 | 216px | width: 21.6rem; |
| .d-width3 | 332px | width: 33.2rem; |
| .d-width4 | 464px | width: 46.4rem; |
| .d-width5 | 628px | width: 62.8rem; |
| .d-width6 | 756px | width: 75.6rem; |
| .d-width7 | 912px | width: 91.2rem; |
| .d-width8 | 1024px | width: 102.4rem; |
| .d-width-auto | N/A | width: auto; |
<div class="d-width1">…</div>
<div class="d-width2">…</div>
<div class="d-width3">…</div>
<div class="d-width4">…</div>
<div class="d-width5">…</div>
<div class="d-width6">…</div>
<div class="d-width7">…</div>
<div class="d-width8">…</div>
<div class="d-width-auto">…</div>Min & Max Width
Set an element's minimum and maxium width using the .d-min-width{#} or .d-max-width{#} classes. These classes use the same width values as the .d-width{#} classes. These classes are typically paired with a percentage width class (.d-width{percent}), having an element fill all available space, being at least a specific size (min-width) or no more than a specific size (max-width).
The table below lists the class names and the CSS output.
| Class | Output |
|---|---|
| .d-min-width1 | min-width: 10.8rem; |
| .d-min-width2 | min-width: 21.6rem; |
| .d-min-width3 | min-width: 33.2rem; |
| .d-min-width4 | min-width: 46.4rem; |
| .d-min-width5 | min-width: 62.8rem; |
| .d-min-width6 | min-width: 75.6rem; |
| .d-min-width7 | min-width: 91.2rem; |
| .d-min-width8 | min-width: 102.4rem; |
| .d-min-width-auto | min-width: auto; |
| .d-max-width1 | max-width: 10.8rem; |
| .d-max-width2 | max-width: 21.6rem; |
| .d-max-width3 | max-width: 33.2rem; |
| .d-max-width4 | max-width: 46.4rem; |
| .d-max-width5 | max-width: 62.8rem; |
| .d-max-width6 | max-width: 75.6rem; |
| .d-max-width7 | max-width: 91.2rem; |
| .d-max-width8 | max-width: 102.4rem; |
| .d-max-width-auto | max-width: auto; |