What this Bootstrap Utility API class does
Set the CSS font-size property of an element. The CSS font-size property is used to set the size of the text within an element. It specifies the size of the font in either relative or absolute terms.
The font-size property can be set using various units such as pixels, ems, rems, percentages, and more. When a pixel value is used, the font size is set to a specific size in pixels, while other units such as ems or rems are relative to the font size of the parent element or the root element, respectively.
Using relative units like ems or rems allows the font size to adjust according to the user's preferences or the size of the browser window. For example, if the font size of the root element is set to 16 pixels and a child element's font size is set to 1.5 ems, the child element's font size will be 24 pixels (1.5 * 16 pixels).
The values for this utility are taken from the Bootstrap SASS map $font-sizes.
Example usage & available classes
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
Example override
In the example override below, we are adding the additional class of "fs-7" with a value of "3rem". Note that a better approach to amending font size options would be to amend the Bootstrap SASS map $font-sizes.
"font-size": map-merge(
map-get($utilities, "font-size"),
(
values: map-merge(
map-get(map-get($utilities, "font-size"), "values"), (
7: 3rem
)
)
)
)