What this Bootstrap Utility API class does
Sets the CSS property "align-self" of an element. The CSS property "align-self" is used to align a single item within a flexbox container along the cross-axis. It overrides the "align-items" property for the selected item.
Using "align-self", a web developer can precisely position a single item within a flexbox container. This is useful when one or more items need to be positioned differently from the others. For example, a button within a navigation menu might need to be aligned to the right, while the other items are aligned to the left.
It is important to note that "align-self" only applies to a single item within a flexbox container, while "align-items" applies to all items within the container. Additionally, if "align-self" is set to "stretch" and the item has a fixed height, it will stretch to fill the available space, potentially distorting its aspect ratio.
Example usage & available classes
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</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-self": map-merge(
map-get($utilities, "align-self"),
(
responsive: false
)
)