Get support Purchase Now Preview Demo

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>