> For the complete documentation index, see [llms.txt](https://lewe.gitbook.io/bootstrap-visuals-for-confluence/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lewe.gitbook.io/bootstrap-visuals-for-confluence/user-guide/badge.md).

# Badge

{% hint style="success" %}
Free Macro
{% endhint %}

## Screenshot

<figure><img src="/files/APNedAFRP6Yd9e4fnGUf" alt=""><figcaption></figcaption></figure>

## Description

The Badge looks much like a lozenge. You can define different styles and sizes and also combine it with a Heading or a Bootstrap button.

<figure><img src="/files/x87SKNXCtOqwsWC5old2" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/RUu5A7KFdWRzLaeUKaFb" alt=""><figcaption></figcaption></figure>

## Adding the Macro

Edit your page.

Select “+” => Other macros

Type in “Bootstrap” in the Search box

Select the “Bootstrap Badge” macro

## Macro Options

<figure><img src="/files/u07ZojVv2npcPVyHtMKJ" alt=""><figcaption></figcaption></figure>

### **Text**

Enter the text of the badge.

### **Style**

Select one of the [Bootstrap color styles](https://support.lewe.com/docs/bootstrap-visuals-for-confluence-manual/user-guide/bootstrap-color-styles/).

### **Type**

Select “Badge” or “Pill”. The pill will have more rounded corners.

### **Size**

Enter the size of the badge in percent. The default size is 75%.

### **Display as**

Select whether to make the Badge part of a Heading or a Bootstrap Button.

{% hint style="warning" %}
If you select a Heading and also use a plugin or macro that reads out the headings of your page, this heading will be included!
{% endhint %}

### **Button/Header Text**

If part of a Heading or Button, enter the prefix text here.

### **Upper Right Corner**

*<mark style="background-color:orange;">Only available in Badge 5</mark>*

With this option enabled, the badge will be shown in the upper right corner of the button. Only has an effect when displayed as a button.

### **Button style**

If part of a Button, select the button style here.

### **Button link**

If part of a Button, you can link the button to a URL. Enter it here and include http\:// or https\://.

### **Target**

Select where to load the linked page, in the same window or in a new tab.

### **Custom Text Color**

You can overwrite the Bootstrap text color here that is defined by the style you selected. You can enter any hexadecimal color value here, preceded by a hash, e.g. #990000.

### **Custom Background Color**

You can overwrite the Bootstrap background color here that is defined by the style you selected. You can enter any hexadecimal color value here, preceded by a hash, e.g. #990000.