--- title: Badges description: 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. bootstrapLink: components/badge/ --- ## Default markup The default badges are square and come in the basic set of colors. ```html code example vertical centered separated scrollable height="15rem" Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ## Headings ```html code example height="240px"

Example heading New

``` ## Outline badges ```html code example vertical centered separated scrollable height="15rem" blue azure indigo purple pink red orange yellow lime green teal cyan ``` ## 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. ```html code example centered separated height="7rem" 1 2 3 4 5 6 7 8 9 10 11 12 ``` ## Soft color badges You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](colors) to see the list of available colors and choose ones that best suit your design. ```html code example vertical centered separated scrollable height="15rem" Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ## Links Place the badge within an `` element if you want it to perform the function of a link and make it clickable. ```html code example vertical centered separated scrollable height="15rem" Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ## Button with badge Badges can be used as part of links or buttons to provide a counter. ```html example centered separated height="7rem" ``` ```html ```