0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-13 01:08:58 +01:00
Bootstrap/site/content/docs/5.0/utilities/opacity.md
harishhalodoc a816615efa
Add utility classes for opacity (#33781)
* Add responsive utility classes for opacity

- fix for #33483

* remove responsive opacity utils as it has impact on bootstrap.css bundle size

* Update opacity.md

* Update site/content/docs/5.0/utilities/opacity.md

Co-authored-by: Mark Otto <otto@github.com>

* Update site/content/docs/5.0/utilities/opacity.md

Co-authored-by: Mark Otto <otto@github.com>

Co-authored-by: Harish <halodoc@ip-192-168-1-101.ap-southeast-1.compute.internal>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: alpadev <2838324+alpadev@users.noreply.github.com>
2021-06-22 19:20:01 -07:00

1.1 KiB

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

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%
<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>

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" >}}