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

Visually Hidden

The .visually-hidden class is used to hide an element from view but still expose it to assistive technologies such as screen readers. Simultaneously, the .visually-hidden-fucusable class will also hide the element from view, but will display it when focused (when selected via the kayboard, for instance).

Tip: Click this sentence and press Tab a few times to view the focusable elements.


    <h2 class="visually-hidden">Some hidden title</h2>
    <a class="visually-hidden-focusable" href="#">Some hidden link</a> 

    <div class="visually-hidden-focusable">
        Some hidden <a href="#">element</a>
    </div>