Legend circleExclusive

A component to indicate properties of elements

Examples

Use .legend-circle class and .bg-{color} utilities for changing background color.

Default
Primary
Info
Danger
Success
Warning
Dark
Light

<ul class="list-inline">
    <li class="list-inline-item d-inline-flex align-items-center">
        <span class="legend-circle"></span>Default
    </li>
    <li class="list-inline-item d-inline-flex align-items-center">
        <span class="legend-circle bg-primary"></span>Primary
    </li>
    <li class="list-inline-item d-inline-flex align-items-center">
        <span class="legend-circle bg-info"></span>Info
    </li>
    <li class="list-inline-item d-inline-flex align-items-center">
        <span class="legend-circle bg-danger"></span>Danger
    </li>
    <li class="list-inline-item d-inline-flex align-items-center">
        <span class="legend-circle bg-success"></span>Success
    </li>
    <li class="list-inline-item d-inline-flex align-items-center">
        <span class="legend-circle bg-warning"></span>Warning
    </li>
    <li class="list-inline-item d-inline-flex align-items-center">
        <span class="legend-circle bg-dark"></span>Dark
    </li>
    <li class="list-inline-item d-inline-flex align-items-center">
        <span class="legend-circle bg-light"></span>Light
    </li>
</ul>

Sizes

Try .legend-circle-sm and .legend-circle-lg for changing the size of the indicator.

Small size
Default size
Large size

<ul class="list-inline">
    <li class="list-inline-item d-inline-flex align-items-center">
        <span class="legend-circle bg-success legend-circle-sm"></span>Small size
    </li>
    <li class="list-inline-item d-inline-flex align-items-center">
        <span class="legend-circle bg-success"></span>Default size
    </li>
    <li class="list-inline-item d-inline-flex align-items-center">
        <span class="legend-circle bg-success legend-circle-lg"></span>Large size
    </li>
</ul>