SPEC FRONTEND
SPEC FRONTEND

Badges

  1. Home
  2. Shortcodes
  3. Badges

Badges

Bootstrap 5: use <span class="badge text-bg-secondary"> (or text-bg-primary, text-bg-success, text-bg-info, text-bg-warning, text-bg-danger). The theme also maps legacy badge-primary etc. for older markup. .my-* is only for spacing.

Secondary Primary Success Info Warning Danger

Spec Custom Badges: Availble with different colors Please use span tag, for example <span class="badge badge-spec"> for default badge, you can use .badge-blue for blue badge & so on.

Default Blue Red Green Turquoise Orange Yellow
Purple Aqua Brown Blue Green Dark Light

Badges With Radius: You should add an additional class .badge-circle or .badge-extra-circle into <span> tag to do circle badges.


Default Bootstrap examples:

Secondary Primary Success Info Warning Danger
Secondary Primary Success Info Warning Danger

Spec Custom Badge Examples (Small Radius): You will need to use an extra class .badge-circle.

Default Blue Red Green Turquoise Orange Yellow

Spec Custom Badge Examples (Big Radius): You will need to use an extra class .badge-extra-circle.

Purple Aqua Brown Blue Green Dark Light

Badges With Icons

A Badge A Badge A Badge
A Badge A Badge A Badge

Bootstrap Table - Badges

# First Name Last Name Username Status
1 Mark Otto @mdo Expiring
2 Jacob Thornton @fat Success
3 Larry the Bird @twitter Error!
4 htmlstream Web Design @htmlstream Pending

Example heading Heading

Example heading Heading

Example heading Heading

Example heading Heading

Example heading Heading
Example heading Heading

Badges

Spec palette: use <span class="badge badge-spec"> (or badge-blue, etc.). For Bootstrap semantics use text-bg-primary and friends.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

badge-circle Corner Badges: You should add an extra class .badge-circle into <span> tag to do cornerd badges.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

badge-circle Corner Badges: You should add an extra class .badge-extra-circle into <span> tag to do circle badges.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Without Icons Usages

Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons Without Icons

Buttons - Badges

You should use a tag or button tag for button & use button class & for badge use an extra class .btn-badge-adjust.

Info 1007
Notifications 9
Messages 7
Tasks 3

Buttons With Icons & Badges

You should use a tag or button tag for button & use button class, for badge use an extra class .btn-badge-adjust & for icon use an additional class .btn-badge-ico.

Info 1007
Notifications 9
Messages 7
Tasks 3

Badge In List

Please use an additional class for badge .badge-in-list-left

Badge In List (Right)

Please use an additional class for badge .badge-in-list-right