---
title: Badges
menu: docs.badges
description: A small count and labeling component.
bootstrap-link: components/badge/
done: true
---
### Default markup
{% example %}
{% for color in site.colors %}
{{ color[0] }}
{% endfor %}
{% endexample %}
### Pill badges
To make a pill bagde (with rounded corners) add `.bagde-pill` class.
{% example %}
{% for color in site.colors %}
{{ forloop.index }}
{% endfor %}
{% endexample %}
### Soft badges
Creates a soft variant of a corresponding contextual badge variation. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example %}
{% for color in site.colors %}
{{ color[0] }}
{% endfor %}
{% endexample %}
### Links
Make a badge work as a link by putting it into an `` element.
{% example %}
{% for color in site.colors %}
{{ color[0] }}
{% endfor %}
{% endexample %}
### Empty badges
If you don't want your badge to contain any text you can do it by leaving the html element empty.
{% example %}
{% for color in site.colors %}
{% endfor %}
{% endexample %}