Bootstrap Opacity

Set element’s opacity with this small utility

Example

When translucent element is needed give it an opacity by adding .o-{value} class. There are 12 predefined values for opacity:

Opacity 0%
Opacity 5%
Opacity 10%
Opacity 20%
Opacity 30%
Opacity 40%
Opacity 50%
Opacity 60%
Opacity 70%
Opacity 80%
Opacity 90%
Opacity 100%
<div class="o-0 bg-primary p-2 text-white mb-2">Opacity 0%</div>
<div class="o-5 bg-primary p-2 text-white mb-2">Opacity 5%</div>
<div class="o-10 bg-primary p-2 text-white mb-2">Opacity 10%</div>
<div class="o-20 bg-primary p-2 text-white mb-2">Opacity 20%</div>
<div class="o-30 bg-primary p-2 text-white mb-2">Opacity 30%</div>
<div class="o-40 bg-primary p-2 text-white mb-2">Opacity 40%</div>
<div class="o-50 bg-primary p-2 text-white mb-2">Opacity 50%</div>
<div class="o-60 bg-primary p-2 text-white mb-2">Opacity 60%</div>
<div class="o-70 bg-primary p-2 text-white mb-2">Opacity 70%</div>
<div class="o-80 bg-primary p-2 text-white mb-2">Opacity 80%</div>
<div class="o-90 bg-primary p-2 text-white mb-2">Opacity 90%</div>
<div class="o-100 bg-primary p-2 text-white mb-2">Opacity 100%</div>