Badges

Basic Badges

PrimarySecondarySuccessDangerWarningInfoLightDark

<div class="d-flex gap-2 flex-wrap">
  <Badge class="badge text-bg-primary">Primary</Badge>
  <Badge class="badge text-bg-secondary">Secondary</Badge>
  <Badge class="badge text-bg-success">Success</Badge>
  <Badge class="badge text-bg-danger">Danger</Badge>
  <Badge class="badge text-bg-warning">Warning</Badge>
  <Badge class="badge text-bg-info">Info</Badge>
  <Badge class="badge text-bg-light">Light</Badge>
  <Badge class="badge text-bg-dark">Dark</Badge>
</div>

Outline Badges

PrimarySecondarySuccessDangerWarningInfoDark

<Badge class="text-outline-primary">Primary</Badge>
<Badge class="text-outline-secondary">Secondary</Badge>
<Badge class="text-outline-success">Success</Badge>
<Badge class="text-outline-danger">Danger</Badge>
<Badge class="text-outline-warning">Warning</Badge>
<Badge class="text-outline-info">Info</Badge>
<Badge class="text-outline-dark">Dark</Badge>

Light Badges

PrimarySecondarySuccessDangerWarningInfoDark

<Badge class="badge text-light-primary"><i class="ti ti-download me-1"></i>Primary</Badge>
<Badge class="badge text-light-secondary">Secondary</Badge>
<Badge class="badge text-light-success">Success</Badge>
<Badge class="badge text-light-danger">Danger</Badge>
<Badge class="badge text-light-warning">Warning</Badge>
<Badge class="badge text-light-info">Info</Badge>
<Badge class="badge text-light-dark">Dark</Badge>

Radius Option on Badges

PrimarySecondarySuccessDanger

<Badge class="badge text-bg-primary b-r-0">Primary</Badge>
<Badge class="badge text-bg-secondary b-r-6">Secondary</Badge>
<Badge class="badge text-bg-success b-r-8">Success</Badge>
<Badge class="badge text-bg-danger b-r-10">Danger</Badge>

Badges Position

<button type="button" class="btn btn-outline-danger position-relative">
                        Offline
                        <span class="position-absolute top-0 start-0 translate-middle p-1 bg-danger border border-light rounded-circle">
                          <span class="visually-hidden">Offline</span>
                        </span>
                      </button>
<button type="button" class="btn btn-outline-warning position-relative">
                        Busy
                        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-warning border border-light rounded-circle">
                          <span class="visually-hidden">Busy</span>
                        </span>
                      </button>
<button type="button" class="btn btn-outline-success position-relative">
                        Online
                        <span class="position-absolute top-100 start-0 translate-middle p-1 bg-success border border-light rounded-circle">
                          <span class="visually-hidden">Online</span>
                        </span>
                      </button>
<button type="button" class="btn btn-outline-secondary position-relative">
                        Disable
                        <span class="position-absolute top-100 start-100 translate-middle p-1 bg-secondary border border-light rounded-circle">
                          <span class="visually-hidden">Disable</span>
                        </span>
                      </button>

Icon's badges

<a className="position-relative bg-light-primary px-2 py-1 rounded" href="#">
  <IconShoppingCart size={22} />
  <span className="position-absolute top-0 start-100 translate-middle p-1 bg-primary rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast" />
</a>

Badges with button

<button type="button" class="btn btn-light-primary position-relative">
  Notifications
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary badge-notification">
    4
  </span>
</button>

<button type="button" class="btn btn-light-secondary position-relative">
  Disable
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-secondary border border-light rounded-circle">
  <span class="visually-hidden">Disable</span>
</span>
</button>

<button type="button" class="btn btn-light-success position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success badge-notification">
    99+
  </span>
</button>

<button type="button" class="btn btn-light-danger position-relative">
  Unread
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger badge-notification">
    <i class="ti ti-bell-ringing"></i>
  </span>
</button>

<button type="button" class="btn btn-outline-warning position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning badge-notification">
    99+
  </span>
</button>

<button type="button" class="btn btn-light-info position-relative f-s-14">
  50% Off
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info badge-notification">
    New
  </span>
</button>

<button type="button" class="btn btn-light-dark position-relative">
  1 missed call
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-dark border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower">
  <span class="visually-hidden">Busy</span>
</span>
</button>

Radius Badges

Heading Title

<h1 class="mb-3">Heading Title </h1>
<h2 class="mb-3">Heading Title </h2>
<h3 class="mb-3">Heading Title </h3>
<h4 class="mb-3">Heading Title </h4>
<h5 class="mb-3">Heading Title </h5>
<h6 class="mb-3">Heading Title </h6>

<div class="d-flex gap-2 flex-wrap"> <Badge class="badge text-bg-primary">Primary</Badge> <Badge class="badge text-bg-secondary">Secondary</Badge> <Badge class="badge text-bg-success">Success</Badge> <Badge class="badge text-bg-danger">Danger</Badge> <Badge class="badge text-bg-warning">Warning</Badge> <Badge class="badge text-bg-info">Info</Badge> <Badge class="badge text-bg-light">Light</Badge> <Badge class="badge text-bg-dark">Dark</Badge> </div>

<Badge class="text-outline-primary">Primary</Badge> <Badge class="text-outline-secondary">Secondary</Badge> <Badge class="text-outline-success">Success</Badge> <Badge class="text-outline-danger">Danger</Badge> <Badge class="text-outline-warning">Warning</Badge> <Badge class="text-outline-info">Info</Badge> <Badge class="text-outline-dark">Dark</Badge>

<Badge class="badge text-light-primary"><i class="ti ti-download me-1"></i>Primary</Badge> <Badge class="badge text-light-secondary">Secondary</Badge> <Badge class="badge text-light-success">Success</Badge> <Badge class="badge text-light-danger">Danger</Badge> <Badge class="badge text-light-warning">Warning</Badge> <Badge class="badge text-light-info">Info</Badge> <Badge class="badge text-light-dark">Dark</Badge>

<Badge class="badge text-bg-primary b-r-0">Primary</Badge> <Badge class="badge text-bg-secondary b-r-6">Secondary</Badge> <Badge class="badge text-bg-success b-r-8">Success</Badge> <Badge class="badge text-bg-danger b-r-10">Danger</Badge>

<button type="button" class="btn btn-outline-danger position-relative"> Offline <span class="position-absolute top-0 start-0 translate-middle p-1 bg-danger border border-light rounded-circle"> <span class="visually-hidden">Offline</span> </span> </button> <button type="button" class="btn btn-outline-warning position-relative"> Busy <span class="position-absolute top-0 start-100 translate-middle p-1 bg-warning border border-light rounded-circle"> <span class="visually-hidden">Busy</span> </span> </button> <button type="button" class="btn btn-outline-success position-relative"> Online <span class="position-absolute top-100 start-0 translate-middle p-1 bg-success border border-light rounded-circle"> <span class="visually-hidden">Online</span> </span> </button> <button type="button" class="btn btn-outline-secondary position-relative"> Disable <span class="position-absolute top-100 start-100 translate-middle p-1 bg-secondary border border-light rounded-circle"> <span class="visually-hidden">Disable</span> </span> </button>

<a className="position-relative bg-light-primary px-2 py-1 rounded" href="#"> <IconShoppingCart size={22} /> <span className="position-absolute top-0 start-100 translate-middle p-1 bg-primary rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast" /> </a>

<button type="button" class="btn btn-light-primary position-relative"> Notifications <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary badge-notification"> 4 </span> </button> <button type="button" class="btn btn-light-secondary position-relative"> Disable <span class="position-absolute top-0 start-100 translate-middle p-2 bg-secondary border border-light rounded-circle"> <span class="visually-hidden">Disable</span> </span> </button> <button type="button" class="btn btn-light-success position-relative"> Inbox <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success badge-notification"> 99+ </span> </button> <button type="button" class="btn btn-light-danger position-relative"> Unread <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger badge-notification"> <i class="ti ti-bell-ringing"></i> </span> </button> <button type="button" class="btn btn-outline-warning position-relative"> Inbox <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning badge-notification"> 99+ </span> </button> <button type="button" class="btn btn-light-info position-relative f-s-14"> 50% Off <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info badge-notification"> New </span> </button> <button type="button" class="btn btn-light-dark position-relative"> 1 missed call <span class="position-absolute top-0 start-100 translate-middle p-2 bg-dark border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower"> <span class="visually-hidden">Busy</span> </span> </button>

<h1 class="mb-3">Heading Title </h1> <h2 class="mb-3">Heading Title </h2> <h3 class="mb-3">Heading Title </h3> <h4 class="mb-3">Heading Title </h4> <h5 class="mb-3">Heading Title </h5> <h6 class="mb-3">Heading Title </h6>