Badge

The Bootstrap Badges are small count and labeling components and fully supported by a Bocons Tag Helper.

Bocons Badge
<h1>Example Heading <badge>New</badge></h1>

Badge Configuration

Color

For proper styling of a badge use the bc-color attribute.

Colored Badge
<badge bc-color="Primary">Primary</badge>
<badge bc-color="Secondary">Secondary</badge>
<badge bc-color="Success">Success</badge>
<badge bc-color="Danger">Danger</badge>
<badge bc-color="Warning">Warning</badge>
<badge bc-color="Info">Info</badge>
<badge bc-color="Light">Light</badge>
<badge bc-color="Dark">Dark</badge>

Pills

Use the bc-pill attribute to make badges more rounded.

Pills
<badge bc-pill="true" bc-color="Primary">Primary</badge>
<badge bc-pill="true" bc-color="Secondary">Secondary</badge>
<badge bc-pill="true" bc-color="Success">Success</badge>
<badge bc-pill="true" bc-color="Danger">Danger</badge>
<badge bc-pill="true" bc-color="Warning">Warning</badge>
<badge bc-pill="true" bc-color="Info">Info</badge>
<badge bc-pill="true" bc-color="Light">Light</badge>
<badge bc-pill="true" bc-color="Dark">Dark</badge>