How to Add Opacity in Bootstrap

You can easily control the opacity of elements in Bootstrap. 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.

Format

Set the opacity of an element using .opacity-{value} utilities. The value can be 25, 50, 75 or 100.

For example,

<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>