1. Home
  2. Docs
  3. Shortcode Bootstrap Visuals Manual
  4. Badge

Badge

Description

A Badge looks much like a lozenge. You can define different styles and sizes and also combine it with an HTML heading or a Bootstrap button. The shortcode adds a <span> element. If you need an empty space before or after you need to addit manually.

Examples and Outputs

[bsv-badge style="danger"]New![/bsv-badge]

New!
 

[bsv-badge style="warning" displayas="button" buttonlink="https://www.lewe.com" target="_blank" prefix="Button"]1234[/bsv-badge]

Button1234
 

[bsv-badge style="success" type="pill" displayas="h4" prefix="Button"]1234[/bsv-badge]

Button1234

Format

[bsv-badge parameter="value" ...]your content here[/bsv-badge]

Parameters

Parameter Description Default
style Defines the Bootstrap style. Supported values:

  • danger
  • dark
  • info
  • light
  • primary
  • secondary
  • success
  • warning
primary
type Allowed values:

  • badge
  • pill
badge
displayas The badge can be combined with a button or heading. Supported values:

  • button
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
no value
prefix If combined with a button or heading, this will be the text of it.

This parameter only works in combination with a displayas value.

no value
buttonstyle If combined with a button, this defines the button style. Supported values:

  • danger
  • dark
  • info
  • light
  • primary
  • secondary
  • success
  • warning

 

This parameter only works in combination with a displayas value.

primary
buttonlink If combined with a button, the button can link to a URL. Define it here. no value
target If combined with a linked button, this defines the target of the link. _self
customtextcolor If you want to change the text color of the badge style you can do it here by proividng the hex color code in CSS format, e.g. #99000. no value
custombgcolor If you want to change the background color of the badge style you can do it here by proividng the hex color code in CSS format, e.g. #000099. no value

 

Was this article helpful to you? Yes No

Leave a Reply

Your email address will not be published. Required fields are marked *