What this Bootstrap Utility API class does
Set the CSS property "vertical-align". The CSS property "vertical-align" is used to vertically align an inline or table-cell element within its parent element.
This property is not used to align block-level elements. For block-level elements, you would use the "margin" property or other layout techniques.
Using the "vertical-align" property, a web developer can precisely position inline and table-cell elements within their parent elements. However, it is important to note that this property does not apply to block-level elements, and that vertical alignment may be affected by the parent element's height and line-height properties.
To align flex items, use the CSS utility .align-items
Example usage & available classes
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>Example override
In the example override below, we are adding the additional value of "sub" to our align class.
"align": map-merge(
map-get($utilities, "align"),
(
values: append(
map-get(map-get($utilities, "align"), "values"), sub
)
)
)