Use the .badge
class, followed by.badge-pill
with
.badge-secondary
class within element to create default pill badge.
Use the .badge
class, followed by.badge-pill
with
.badge-primary
class within element to create primary pill badge.
Use the .badge
class, followed by.badge-pill
with
.badge-success
class within element to create success pill badge.
Use the .badge
class, followed by .badge-pill
with
.badge-danger
class within element to create danger pill badge.
Use the .badge
class, followed by .badge-pill
with
.badge-info
class within element to create info pill badge.
Use the .badge
class, followed by .badge-pill
with
.badge-warning
class within element to create warning pill badge.
Use class .badge-glow
to add glow effect to your badge
Use .badge-up
to set pill badge to higher than other text. So that it can work with notifications
also.
Use class .badge.badge-pill
with <a>
tag to make your badge a link
wrap your .badge
with .dropup
to make your badge a dropup
use .block
with .badge-pill
to display your badge as block level element
Use classes badge-{xl|lg|md|sm}
to change size of a badge