Object Position
Controls how to position the container’s content.
| Class | Properties |
|---|---|
| op-b | object-position: bottom; |
| op-c | object-position: center; |
| op-lb | object-position: left bottom; |
| op-left | object-position: left; |
| op-lt | object-position: left top; |
| op-r | object-position: right; |
| op-rb | object-position: right bottom; |
| op-rt | object-position: right top; |
| op-t | object-position: top; |
Using breakpoints
Using responsive breakpoints like sm:op-*, md:op-*, lg:op-*, and xxl:op-* allows targeting specific utilities in different viewports.
<div class="op-l md:op-r ..."></div>Using variants
Using :hover variants such as h:op-* allows you to override elements and change their values when hovering over them.
<div class="op-l h:op-r ..."></div>