Opacity

Utilities for controlling the opacity of an element.

¶Usage

<div class="bg-primary opacity-100"></div>
<div class="bg-primary opacity-70"></div>
<div class="bg-primary opacity-40"></div>
<div class="bg-primary opacity-10"></div>

¶Responsive

To control the opacity of an element at a specific breakpoint, use the .opacity-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing opacity utility. For example, use opacity-md-30 to apply the opacity-30 utility at only medium screen sizes and above.

<div class="opacity-30 opacity-md-50 ..."></div>

¶Customizing

¶Values

The values for opacity utilities can be customized using the theme's config file:

$theme: (
    opacity: (
        values: (
            0: 0,
            10: 0.1,
            20: 0.2,
            30: 0.3,
            40: 0.4,
            50: 0.5,
            60: 0.6,
            70: 0.7,
            80: 0.8,
            90: 0.9,
+           95: 0.95,
            100: 1
        )
    )
);

¶States

Use the state option to generate pseudo-class variations. Example pseudo-classes are :hover and :focus. When a list of states are provided, classnames are created for that pseudo-class.

$theme: (
    opacity: (
        state: active
    )
);

¶Disabling

Remove any of the default utilities associated with the opacity by setting the group key to false.

$theme: (
    opacity: (
        disable: true
    )
);