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%;
.d-width100
.d-width10
.d-width90
.d-width20
.d-width80
.d-width25
.d-width75
.d-width30
.d-width70
.d-width40
.d-width60
.d-width50
.d-width50
<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;
108px
216px
332px
464px
628px
756px
912px
1024px
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;