badges.md 4.2 KB
title: Badges summary: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info. description: Add extra information with badges.
bootstrapLink: components/badge/
Default markup
The default badges are square and come in the basic set of colors.
{% capture html -%} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan {%- endcapture %} {% include "docs/example.html" html=html centered %}
Headings
{% capture html -%}
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
{%- endcapture %} {% include "docs/example.html" html=html %}Outline badges
{% capture html -%} blue azure indigo purple pink red orange yellow lime green teal cyan {%- endcapture %} {% include "docs/example.html" html=html centered %}
Pill badges
Use the .badge-pill class if you want to create a badge with rounded corners. Its width will adjust to the label text.
{% capture html -%} 1 2 3 4 5 6 7 8 9 10 11 12 {%- endcapture %} {% include "docs/example.html" html=html centered %}
Links
Place the badge within an <a> element if you want it to perform the function of a link and make it clickable.
{% capture html -%} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan {%- endcapture %} {% include "docs/example.html" html=html centered %}
Button with badge
Badges can be used as part of links or buttons to provide, for example, a counter.
{% capture html -%}
Notifications <span class="badge bg-red-lt ms-2">4</span>