Badges Add to shortcut list

The badge component that is part of Bootstrap is expanded with several variants and some additional classes.

Default badge

Simply use class badge-default

4 8 16
Primary badge

Simply use class badge-primary

4 8 16
Success badge

Simply use class badge-success

4 8 16
Info badge

Simply use class badge-info

4 8 16
Warning badge

Simply use class badge-warning

4 8 16
Danger badge

Simply use class badge-danger

4 8 16
Danger outline badge

Simply use class badge-outline-danger

4 8 16
Warning outline badge

Simply use class badge-outline-warning

4 8 16
Info outline badge

Simply use class badge-outline-info

4 8 16
Success outline badge

Simply use class badge-outline-success

4 8 16
Primary outline badge

Simply use class badge-outline-primary

4 8 16
Default outline badge

Simply use class badge-outline-default

4 8 16
Badge as a link

Badges with hover state, but only for links

4 8 16 32 64 128 128 64 32 16 8 4
Font size, paddings, colors, can be changed through variables.

Badge with others

The following examples are some cases but not the only ones on how this component can be composed with others.
List group

Simply use class badge-{modifier}

  • 16 Messages
Buttons

Simply use class badge-{modifier}

Outline buttons

Simply use class badge-{modifier}

Links

Simply use class badge-{modifier}

Inbox 16
Badge with arrow

With arrows of all sizes

small default large
Outline badge with arrow

With arrows of all sizes

small default large
Badge with arrow

Badge with hover state

32 messages
Outline badge with arrow

Badge with hover state

32 messages
Above another element

Simply use class badge-above

8
Above another element

Simply use class right

8
Above another element

Simply use class badge-above

128
Above another element

Simply use class right

128
Badge with animate.css

When you scroll to the bottom of this page.

64
Badge with animate.css

When you scroll to the bottom of this page.

64
Any badge element can be positioned above another element for one quadrant.
quadrant - equal to one quarter of a circle
Version 1.0.0 2016 © Elephant Theme By Naksoid
Buy Elephant Now!
  • Theme Settings
  • Header fixed
  • Sidebar fixed
  • Sidebar sticky*
  • Sidebar collapsed
  • Footer fixed
  • Sidebar sticky* - by scrolling up and down the page, the menu placed on the sidebar moves along with the content until the bottom of the menu is reached. Learn more