aConic Admin Documentation - v1.0

Get Support
Preview Demo
Introduction Getting Started Design & Graphics Components Tables Basic Form Advanced Forms Charts Others
Version - 1.0.0 Help
Notes

aConic is a Static HTML Template

Badge

See what's new added, changed, fixed, improved or updated in the latest aConic versions.
Bootstrap Badges documentation

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Secondary Success Danger Warning Info Light Dark 
                                          
  <span class="badge bg-primary">Primary</span>
  <span class="badge bg-secondary">Secondary</span>
  <span class="badge bg-success">Success</span>
  <span class="badge bg-danger">Danger</span>
  <span class="badge bg-warning text-dark">Warning</span>
  <span class="badge bg-info text-dark">Info</span>
  <span class="badge bg-light text-dark">Light</span>
  <span class="badge bg-dark">Dark</span>

Soft

Use bg-opacity-10 classes.

Primary Secondary Success Danger Warning Info Dark 
                                            
    <span class="badge bg-primary bg-opacity-10 text-primary">Primary</span>
    <span class="badge bg-secondary bg-opacity-10 text-secondary">Secondary</span>
    <span class="badge bg-success bg-opacity-10 text-success">Success</span>
    <span class="badge bg-danger bg-opacity-10 text-danger">Danger</span>
    <span class="badge bg-warning bg-opacity-10 text-warning">Warning</span>
    <span class="badge bg-info bg-opacity-10 text-info">Info</span>
    <span class="badge bg-dark bg-opacity-10 text-dark">Dark</span>

Pill badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal code).

Primary Secondary Success Danger Warning Info Light Dark 
                                          
  <span class="badge rounded-pill bg-primary">Primary</span>
  <span class="badge rounded-pill bg-secondary">Secondary</span>
  <span class="badge rounded-pill bg-success">Success</span>
  <span class="badge rounded-pill bg-danger">Danger</span>
  <span class="badge rounded-pill bg-warning text-dark">Warning</span>
  <span class="badge rounded-pill bg-info text-dark">Info</span>
  <span class="badge rounded-pill bg-light text-dark">Light</span>
  <span class="badge rounded-pill bg-dark">Dark</span>

More examples

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
                                          
  <!-- start avatar-->
  <h1>Example heading <span class="badge bg-secondary">New</span></h1>
  <h2>Example heading <span class="badge bg-secondary">New</span></h2>
  <h3>Example heading <span class="badge bg-secondary">New</span></h3>
  <h4>Example heading <span class="badge bg-secondary">New</span></h4>
  <h5>Example heading <span class="badge bg-secondary">New</span></h5>
  <h6>Example heading <span class="badge bg-secondary">New</span></h6>
  <!-- end avatar-->

Badges can be used as part of links or buttons to provide a counter. 

                                          
  <button type="button" class="btn btn-primary">
    Notifications <span class="badge bg-secondary">4</span>
  </button>

  <button type="button" class="btn btn-primary position-relative">
    Inbox
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
      99+
      <span class="visually-hidden">unread messages</span>
    </span>
  </button>

  <button type="button" class="btn btn-primary position-relative">
    Profile
    <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
      <span class="visually-hidden">New alerts</span>
    </span>
  </button>
Avatars
Breadcrumb