Header Badges

The following classes can be added to the <span> tag to change the type of badge: .bg-primary, .bg-secondary, .bg-success, .bg-warning, .bg-danger, .bg-info.

Header 1

See the Pen Components – Badges: H1 by Working Solutions (@wsol) on CodePen.

Header 2

See the Pen Components – Badges: H2 by Working Solutions (@wsol) on CodePen.

Header 3

See the Pen Components – Badges: H3 by Working Solutions (@wsol) on CodePen.

Header 4

See the Pen Components – Badges: H4 by Working Solutions (@wsol) on CodePen.

Header 5

See the Pen Components – Badges: H5 by Working Solutions (@wsol) on CodePen.

Header 6

See the Pen Components – Badges: H6 by Working Solutions (@wsol) on CodePen.

Theme Badges

Sea Serpent

See the Pen Components – Badges: Theme Sea Serpent by Working Solutions (@wsol) on CodePen.

Ifrit

See the Pen Components – Badges: Theme Ifrit by Working Solutions (@wsol) on CodePen.

Dragon

See the Pen Components – Badges: Theme Dragon by Working Solutions (@wsol) on CodePen.

Sun Wukong

See the Pen Components – Badges: Theme Sun Wukong by Working Solutions (@wsol) on CodePen.

Dybbuk

See the Pen Components – Badges: Theme Dybbuk by Working Solutions (@wsol) on CodePen.

Fae

See the Pen Components – Badges: Theme Fae by Working Solutions (@wsol) on CodePen.

Nine Tails

See the Pen Components – Badges: Theme Nine Tails by Working Solutions (@wsol) on CodePen.

Contextual Badges

Primary

See the Pen Components – Badges: Contexual Primary by Working Solutions (@wsol) on CodePen.

Secondary

See the Pen Components – Badges: Contexual Secondary by Working Solutions (@wsol) on CodePen.

Success

See the Pen Components – Badges: Contexual Success by Working Solutions (@wsol) on CodePen.

Danger

See the Pen Components – Badges: Contexual Danger by Working Solutions (@wsol) on CodePen.

Warning

See the Pen Components – Badges: Contexual Warning by Working Solutions (@wsol) on CodePen.

Info

See the Pen Components – Badges: Contexual Info by Working Solutions (@wsol) on CodePen.

Light

See the Pen Components – Badges: Contexual Light by Working Solutions (@wsol) on CodePen.

Dark

See the Pen Components – Badges: Contexual Dark by Working Solutions (@wsol) on CodePen.

Button

Badge as a Button

See the Pen Components – Badges: Button by Working Solutions (@wsol) on CodePen.