What this Bootstrap Utility API class does
Sets the CSS flex-grow property of an element. The CSS property flex-grow is used to control the ability of a flex item to grow and take up available space within a flex container.
The flex-grow property specifies the proportion of the available space that a flex item should take up along the main axis of the flex container. It is a unitless value that represents the share of the remaining space that should be allocated to the item after all non-flexible items have been laid out.
Example usage & available classes
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 flex-grow-0 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</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.
"flex-grow": map-merge(
map-get($utilities, "flex-grow"),
(
responsive: false
)
)