0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/site/content/docs/5.3/utilities/opacity.md
Benedikt Willi 787dfea8a2 Explicitly add missing opacity-0 helper class example for clarity.
Add a missing opacity-0 helper class example. From existing examples, it wasn't obvious to me that this class exists. This commit makes it a bit more explicit.
2023-06-25 14:47:15 -07:00

1.3 KiB

layout title description group added
docs Opacity Control the opacity of elements. utilities 5.1

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.

Set the opacity of an element using .opacity-{value} utilities.

100%
75%
50%
25%
0%
<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>
<div class="opacity-0">...</div>

CSS

Sass utilities API

Opacity utilities are declared in our utilities API in scss/_utilities.scss. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

{{< scss-docs name="utils-opacity" file="scss/_utilities.scss" >}}