Badges
Documentation and examples for badges, our small count and labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Example
Add any of the below mentioned modifier classes to change the appearance of a badge.Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-dark">Dark</span>Outline
Badges can be used with outline style just add .badge-outline-* to badge class. It can be good solution to show visitors a custom rank like administrator with primary color.
<span class="badge badge-outline-primary">Primary</span>
<span class="badge badge-outline-success">Success</span>
<span class="badge badge-outline-info">Info</span>
<span class="badge badge-outline-warning">Warning</span>
<span class="badge badge-outline-danger">Danger</span>
<span class="badge badge-outline-dark">Dark</span>Category
Display categories with category badges and add .badge-category to badge class. Easy to modify custom category colors with scss in variables.scss file.
<span class="badge badge-ps4">Ps4</span>
<span class="badge badge-xbox">Xbox</span>
<span class="badge badge-pc">PC</span>
<span class="badge badge-uplay">Uplay</span>
<span class="badge badge-steam">Steam</span>
<span class="badge badge-twitch">Twitch</span>Social
Similar for category badges and use .badge-social class to add a custom social badge to your site like facebook or twitter.
<span class="badge badge-facebook">Facebook</span>
<span class="badge badge-twitter">Twitter</span>
<span class="badge badge-skype">Skype</span>
<span class="badge badge-vk">VK</span>
<span class="badge badge-vimeo">Vimeo</span>
<span class="badge badge-youtube">Youtube</span>
<span class="badge badge-google-plus">Google Plus</span>
<span class="badge badge-reddit">Reddit</span>
<span class="badge badge-pinterest">Pinterest</span>
<span class="badge badge-instagram">Instagram</span>