What this Bootstrap Utility API class does
Sets the CSS property "align-content" of an element. The CSS property "align-content" is used to set the distribution of space between and around content items along the cross-axis of a flexbox container, when there is extra space available. It determines how the flex lines are positioned within the flex container. This property is only applicable when the flexbox container has multiple lines of content, which can occur when the "flex-wrap" property is set to "wrap".
By using the "align-content" property, a web developer can control the position and spacing of the flex lines within a flexbox container.
Example usage & available classes
<div class="d-flex align-content-start flex-wrap"></div>
<div class="d-flex align-content-end flex-wrap"></div>
<div class="d-flex align-content-center flex-wrap"></div>
<div class="d-flex align-content-between flex-wrap"></div>
<div class="d-flex align-content-around flex-wrap"></div>
<div class="d-flex align-content-stretch flex-wrap"></div>Example override
In the example override below, we are removing the responsive option from the utility, which means it would not be available per breakpoint.
"align-content": map-merge(
map-get($utilities, "align-content"),
(
responsive: false
)
)