Utilities to change an element's font variant numeric.
The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
Use d-fvn-normal to deactivate any alternate glyphs.
<p class="d-fvn-normal">1234567890</p>
The class d-fvn-ordinal forces the use of special glyphs for ordinal markers, like 1st, 2nd, 3rd.
<p class="d-fvn-ordinal">1st, 2nd, 3rd, 4th</p>
Use d-fvn-proportional to set different sizes for each number.
<div class="d-fvn-proportional"> <table class="numbers-table"> <tbody> <tr> <td><span>21.0</span></td> <td><span>160</span></td> <td><span>3.90</span></td> <td><span>2.875</span></td> <td><span>17.02</span></td> </tr> <tr> <td><span>22.8</span></td> <td><span>108</span></td> <td><span>3.85</span></td> <td><span>2.320</span></td> <td><span>18.61</span></td> </tr> <tr> <td><span>21.4</span></td> <td><span>258</span></td> <td><span>3.08</span></td> <td><span>3.215</span></td> <td><span>19.44</span></td> </tr> </tbody></table> </div>
Use d-fvn-tabular for aligning tabular data and preventing layout shifts of dynamically-changing content. For example, a timer counting down.
<div class="d-fvn-tabular"> <table class="numbers-table"> <tbody> <tr> <td><span>21.0</span></td> <td><span>160</span></td> <td><span>3.90</span></td> <td><span>2.875</span></td> <td><span>17.02</span></td> </tr> <tr> <td><span>22.8</span></td> <td><span>108</span></td> <td><span>3.85</span></td> <td><span>2.320</span></td> <td><span>18.61</span></td> </tr> <tr> <td><span>21.4</span></td> <td><span>258</span></td> <td><span>3.08</span></td> <td><span>3.215</span></td> <td><span>19.44</span></td> </tr> </tbody></table> </div>
Use d-fvn-diagonal to display numerator and denominator smaller and separated by a slash.
<p class="d-fvn-diagonal">1/2 3/4 5/6</p>
Use d-fvn-unset to deactivate other value previously set to font-variant-numeric.
<p class="d-fvn-unset">1234567890</p>
Class
|
Output
|
|---|---|
| .d-fvn-normal | font-variant-numeric: normal !important; |
| .d-fvn-ordinal | font-variant-numeric: ordinal !important; |
| .d-fvn-proportional | font-variant-numeric: proportional-nums !important; |
| .d-fvn-tabular | font-variant-numeric: tabular-nums !important; |
| .d-fvn-diagonal | font-variant-numeric: diagonal-fractions !important; |
| .d-fvn-unset | font-variant-numeric: unset !important; |
Font Variant Numeric documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope