Opacity

Control the opacity of elements.

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, .5 is 50% visible, and 0 is completely transparent.

Design

Code

100%

75%

50%

25%

<div className="d-sm-flex">
    <div className="opacity-100 p-3 m-2 bg-primary text-light fw-bold rounded">100%</div>
    <div className="opacity-75 p-3 m-2 bg-primary text-light fw-bold rounded">75%</div>
    <div className="opacity-50 p-3 m-2 bg-primary text-light fw-bold rounded">50%</div>
    <div className="opacity-25 p-3 m-2 bg-primary text-light fw-bold rounded">25%</div>
</div>