Scale

Use scale utilities for a transformation that resizes an element on the 2D plane.


Class
Properties
scale-0
scale-25
scale-50
scale-75
scale-90
scale-95
scale-100
scale-105
scale-110
scale-125
scale-150
scale-200
scale-y-0
scale-y-25
scale-y-50
scale-y-75
scale-y-90
scale-y-95
scale-y-100
scale-y-105
scale-y-110
scale-y-125
scale-y-150
scale-y-200
scale-x-0
scale-x-25
scale-x-50
scale-x-75
scale-x-90
scale-x-95
scale-x-100
scale-x-105
scale-x-110
scale-x-125
scale-x-150
scale-x-200

Usage

Use the transform utilities to apply a 2D or 3D transformation to an element. This property allows you to rotate, scale, rotate, move or skew elements.

<div class="d-flex">
    <div class="transform scale-50"></div>
    <div class="transform scale-100"></div>
    <div class="transform scale-125"></div>
</div>

Responsive

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

<div class="transform scale-50 scale-md-100 ..."></div>
UI Components

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

Explore ->