Legend Indicator

Examples

Preview
HTML
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-indicator"></span>Default
                  </li>
                  <li class="list-inline-item d-inline-flex align-items-center">
                    <span class="legend-indicator bg-primary"></span>Primary
                  </li>
                  <li class="list-inline-item d-inline-flex align-items-center">
                    <span class="legend-indicator bg-info"></span>Info
                  </li>
                  <li class="list-inline-item d-inline-flex align-items-center">
                    <span class="legend-indicator bg-danger"></span>Danger
                  </li>
                  <li class="list-inline-item d-inline-flex align-items-center">
                    <span class="legend-indicator bg-success"></span>Success
                  </li>
                  <li class="list-inline-item d-inline-flex align-items-center">
                    <span class="legend-indicator bg-warning"></span>Warning
                  </li>
                  <li class="list-inline-item d-inline-flex align-items-center">
                    <span class="legend-indicator bg-dark"></span>Dark
                  </li>
                  <li class="list-inline-item d-inline-flex align-items-center">
                    <span class="legend-indicator bg-light"></span>Light
                  </li>
                </ul>
Examples
