Bootstrap Visuals for Confluence
  • Introduction
  • Free and License Macros
  • Administrator Guide
    • Sample Page Code
    • Interference with other Apps
    • Data Center Compatibility
  • User Guide
    • Alert Box
    • Alert Box 5
    • Bootstrap Color Styles
    • Badge
    • Badge 5
    • Button
    • Button 5
    • Button Group
    • Button Group 5
    • Callout
    • Callout 5
    • Card
    • Card 5
    • Jumbotron
    • List Group
    • List Group 5
    • List Group Item
    • List Group Item 5
    • Panel
    • Progress Bar
    • Progress Bar 5
    • Multi Progress Bar 5
    • Spacer
    • Spinner
    • Spinner 5
    • Toast
  • Credits
Powered by GitBook
On this page
  • Screenshot
  • Description
  • Adding the Macro
  • Macro Options
  • Text
  • Style
  • Type
  • Size
  • Display as
  • Button/Header Text
  • Upper Right Corner
  • Button style
  • Button link
  • Target
  • Custom Text Color
  • Custom Background Color

Was this helpful?

  1. User Guide

Badge

PreviousBootstrap Color StylesNextBadge 5

Last updated 2 years ago

Was this helpful?

Free Macro

Screenshot

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.

Adding the Macro

Edit your page.

Select “+” => Other macros

Type in “Bootstrap” in the Search box

Select the “Bootstrap Badge” macro

Macro Options

Text

Enter the text of the badge.

Style

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.

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!

Button/Header Text

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

Upper Right Corner

Only available in Badge 5

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.

Select one of the .

Bootstrap color styles