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

Vertical Rule

The vertical rule helper is used to create dividers similar with the <hr> element, but on the vertical axis, as the name suggests. By default, the rule is 1px wide and has a minimum height of 1rem.

A simple vertical rule

A simple vertical rule still, but this one is significantly longer and has more text besides it


    <div class="vr me-2"><div>
        A simple vertical rule

    <div class="d-flex" style="height: 100px; width: 200px;">
        <div class="vr me-2"><div>
            A simple vertical rule still, but this one is
            significantly longer and has more text besides it.
    </div>