Place self
Utilities for controlling how an individual item is justified and aligned at the same time.
Class reference
Auto
Use place-self-auto
to align an item based on the value of the container’s place-items
property:
Start
Use place-self-start
to align an item to the start on both axes:
Center
Use place-self-center
to align an item at the center on both axes:
End
Use place-self-end
to align an item to the end on both axes:
Stretch
Use place-self-stretch
to stretch an item on both axes:
Responsive
To place an item at a specific breakpoint, add a {screen}:
prefix to any existing place-self
utility. For example, use md:place-self-end
to apply the place-self-end
utility at only medium screen sizes and above.
<div class="place-self-start md:place-self-end">
<!-- ... -->
</div>
For more information about Elements’ responsive design features, check out the Responsive Design documentation.
On this Page
v1.13.5