Getting Started

Introduction Installation Support

Core Concepts

Helpers & Utilities Responsive Design Dark/ Light Mode

Components

Breadcrumb Button Navbar

Customization

Colors Variables Color Modes

Layout

Breakpoints Containers Gutters Offsets Rows & Columns

Helpers

Clearfix Focus Ring Position Ratio Stretched Link Text Truncate Vertical Rule Visually Hidden

Utilities

Border Display Flex Float Opacity Overflow Position Shadow Sizing Spacing Text Visibility Z-Index

Opacity

The .opacity-* class is used to set the opacity level of an element to one of 5 different pre-defined values, or any number of custom-defined values.

opacity: 1.00

opacity: 0.75

opacity: 0.50

opacity: 0.25

opacity: 0.00


    <div class="bg opacity-100">opacity: 1.00</div>
    <div class="bg opacity-75">opacity: 0.75</div>
    <div class="bg opacity-50">opacity: 0.50</div>
    <div class="bg opacity-25">opacity: 0.25</div>
    <div class="bg opacity-0">opacity: 0.00</div>