4 description: Documentation and examples for badges, our small count and labelling component.
8 Small and adaptive tag for adding context to just about any content.
12 * Will be replaced with the ToC, excluding the "Contents" header
17 Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
20 <h1>Example heading <span class="badge badge-default">New</span></h1>
21 <h2>Example heading <span class="badge badge-default">New</span></h2>
22 <h3>Example heading <span class="badge badge-default">New</span></h3>
23 <h4>Example heading <span class="badge badge-default">New</span></h4>
24 <h5>Example heading <span class="badge badge-default">New</span></h5>
25 <h6>Example heading <span class="badge badge-default">New</span></h6>
28 ## Contextual variations
30 Add any of the below mentioned modifier classes to change the appearance of a badge.
33 <span class="badge badge-default">Default</span>
34 <span class="badge badge-primary">Primary</span>
35 <span class="badge badge-success">Success</span>
36 <span class="badge badge-info">Info</span>
37 <span class="badge badge-warning">Warning</span>
38 <span class="badge badge-danger">Danger</span>
41 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
42 {{ callout-include | markdownify }}
46 Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
49 <span class="badge badge-pill badge-default">Default</span>
50 <span class="badge badge-pill badge-primary">Primary</span>
51 <span class="badge badge-pill badge-success">Success</span>
52 <span class="badge badge-pill badge-info">Info</span>
53 <span class="badge badge-pill badge-warning">Warning</span>
54 <span class="badge badge-pill badge-danger">Danger</span>