Object Position

Class	Properties
op-b	object-position: bottom;
op-c	object-position: center;
op-l	object-position: left;
op-lb	object-position: left bottom;
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;

Bottom

This example sets the object position to bottom. The content will be positioned at the bottom of the container.

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Center

This example sets the object position to center. The content will be centered within the container.

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Left

This example sets the object position to left. The content will be positioned at the left side of the container.

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Left Bottom

This example sets the object position to left bottom. The content will be positioned at the bottom left corner of the container.

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Left Top

This example sets the object position to left top. The content will be positioned at the top left corner of the container.

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Right

This example sets the object position to right. The content will be positioned at the right side of the container.

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Right Bottom

This example sets the object position to right bottom. The content will be positioned at the bottom right corner of the container.

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Right Top

This example sets the object position to right top. The content will be positioned at the top right corner of the container.

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Top

This example sets the object position to top. The content will be positioned at the top of the container.

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

You can combine 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>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

Alternatively, you can apply :hover by using h:op-* utility to override elements and change their values when hovering over them.

<div class="op-l h:op-r ..."></div>