DashByte - Premium Dashboard Template

Utilities

Opacity

Control the opacity of elements. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Basic Usage

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.

100%

75%

50%

25%

<div class="d-flex gap-3">
  <div class="w-25 opacity-100 bg-primary text-white text-center p-3">100%</div>
  <div class="w-25 opacity-75 bg-primary text-white text-center p-3">75%</div>
  <div class="w-25 opacity-50 bg-primary text-white text-center p-3">50%</div>
  <div class="w-25 opacity-25 bg-primary text-white text-center p-3">25%</div>
</div>

Shaira Diaz

Opacity

Basic Usage