top / right / bottom / left

Utilities for controlling the placement of positioned elements.

Use top-fluid-[breakpoints], right-fluid-[breakpoints], bottom-fluid-[breakpoints], left-fluid-[breakpoints], and inset-fluid-[breakpoints] utilities to set the horizontal or vertical position of a positioned element.

Basic example

The top position scales fluidly by using the top-fluid-[10px,18px] class between 10px and 18px, creating smooth responsive positioning for absolutely positioned elements.

JSX

<div className="relative">
  <div className="absolute top-fluid-[10px,18px] ..." />
</div>

Right, bottom, left, and inset fluid scaling

The right, bottom, left and inset positions scale fluidly by using the right-fluid-[10px,18px], bottom-fluid-[10px,18px], left-fluid-[10px,18px] and inset-fluid-[10px,18px] classes between 10px and 18px.

JSX

<div>
  {/* Box A - Right */}
  <div>
    {/* Static position */} 
    <div className="absolute right-0 ..." />
    {/* Fluid position */}
    <div className="absolute right-fluid-[10px,18px] ...">
        ...
    </div>
  </div>
  {/* Box B - Bottom */}
  <div>
    {/* Static position */}
    <div className="absolute bottom-0 ..." />
    {/* Fluid position */}
    <div className="absolute bottom-fluid-[10px,18px] ...">
        ...
    </div>
  </div>
  {/* Box C - Left */}
  <div>
    {/* Static position */}
    <div className="absolute left-0 ..." />
    {/* Fluid position */}
    <div className="absolute left-fluid-[10px,18px] ...">
        ...
    </div>
  </div>
  {/* Box D - Inset */}
  <div>
    {/* Static position */}
    <div className="absolute inset-0 ..." />
    {/* Fluid position */}
    <div className="absolute inset-fluid-[10px,18px] ...">
        ...
    </div>
  </div>
</div>

top / right / bottom / left

Basic example

Right, bottom, left, and inset fluid scaling

Follow us