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.
<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>
Opacity utilities are declared in our utilities API in scss/_utilities.scss
. Learn how to use the utilities API.
"opacity": ( property: opacity, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ),
© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/utilities/opacity/