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>