Bootstrap Opacity
Set element's opacity with the opacity utility class
Static
Change the opacity of the element by adding .opacity-* class.
Opacity 0%
Opacity 5%
Opacity 10%
Opacity 20%
Opacity 30%
Opacity 40%
Opacity 50%
Opacity 60%
Opacity 70%
Opacity 80%
Opacity 100%
<div class="opacity-0">Opacity 0%</div>
<div class="opacity-5">Opacity 5%</div>
<div class="opacity-10">Opacity 10%</div>
<div class="opacity-20">Opacity 20%</div>
<div class="opacity-30">Opacity 30%</div>
<div class="opacity-40">Opacity 40%</div>
<div class="opacity-50">Opacity 50%</div>
<div class="opacity-60">Opacity 60%</div>
<div class="opacity-70">Opacity 70%</div>
<div class="opacity-80">Opacity 80%</div>
<div class="opacity-100">Opacity 100%</div>Dynamic
Dynamically change the opacity on various triggers such as hover and inview, or when element gets .active / .show class. Read more about the Triggers.
Opacity 0%
Opacity 5%
Opacity 10%
Opacity 20%
Opacity 30%
Opacity 40%
Opacity 50%
Opacity 60%
Opacity 70%
Opacity 80%
Opacity 100%
<div data-tor="hover:opacity(0%)">Opacity 0%</div>
<div data-tor="hover:opacity(5%)">Opacity 5%</div>
<div data-tor="hover:opacity(10%)">Opacity 10%</div>
<div data-tor="hover:opacity(20%)">Opacity 20%</div>
<div data-tor="hover:opacity(30%)">Opacity 30%</div>
<div data-tor="hover:opacity(40%)">Opacity 40%</div>
<div data-tor="hover:opacity(50%)">Opacity 50%</div>
<div data-tor="hover:opacity(60%)">Opacity 60%</div>
<div data-tor="hover:opacity(70%)">Opacity 70%</div>
<div data-tor="hover:opacity(80%)">Opacity 80%</div>
<div data-tor="hover:opacity(100%)">Opacity 100%</div>