Rotate

Utilities for controlling the rotation an element around a fixed point.


Class
Properties
rotate-0
rotate-1
rotate-2
rotate-3
rotate-6
rotate-12
rotate-45
rotate-90
rotate-180

Usage

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

<div class="d-flex">
    <div class="transform rotate-12"></div>
    <div class="transform rotate-45"></div>
    <div class="transform rotate-90"></div>
    <div class="transform scale-180"></div>
</div>

Negative rotations

You can also use negative values to rotate an element in the inverse direction.

<div class="d-flex">
    <div class="transform rotate-n12"></div>
    <div class="transform rotate-n45"></div>
</div>

Responsive

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

<div class="transform rotate-12 rotate-md-0 ..."></div>
UI Components

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

Explore ->