Translate

Use the translate utilities to repositions an element in the horizontal and/or vertical directions.


Class
Properties
translate-y-0
translate-y-1
translate-y-2
translate-y-3
translate-y-4
translate-y-5
translate-y-6
translate-y-7
translate-y-8
translate-y-10
translate-y-12
translate-y-16
translate-y-20
translate-y-24
translate-y-32
translate-y-40
translate-y-48
translate-y-56
translate-y-64
translate-y-px
translate-y-full
translate-x-0
translate-x-1
translate-x-2
translate-x-3
translate-x-4
translate-x-5
translate-x-6
translate-x-7
translate-x-8
translate-x-10
translate-x-12
translate-x-16
translate-x-20
translate-x-24
translate-x-32
translate-x-40
translate-x-48
translate-x-56
translate-x-64
translate-x-px
translate-x-full

Usage

Use the rotate utility classes to control the rotation an element around a fixed point.

<div class="d-flex">
    <div class="transform translate-x-n10"></div>
    <div class="transform translate-y-10"></div>
    <div class="transform translate-x-1/2 translate-y-n1/2"></div>
</div>

Responsive

Responsive variations also exist for each translate value. Use the .translate-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing translate utility.

<div class="transform translate-1/2 translate-x-md-0 ..."></div>
UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->