is now part of Shuffle™. The new editor includes templates for Bootstrap, Bulma, Material-UI, and Tailwind CSS.
Switch to Shuffle →
← all Bootstrap classes list

Bootstrap class: .badge

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Preview

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Check .badge in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _badge.scss:6 */
.badge {
  display: inline-block;
  padding: $badge-padding-y $badge-padding-x;
  font-size: $badge-font-size;
  font-weight: $badge-font-weight;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  @include border-radius($badge-border-radius);

  // Empty badges collapse automatically
  &:empty {
    display: none;
  }
}

/* _print.scss:103 */
.badge {
  border: $border-width solid $black;
}

Uses variables

Code copied to the clipboard.

Copying failed

/* _badge.scss:6 */
$badge-padding-y
$badge-padding-x
$badge-font-size
$badge-font-weight
$badge-border-radius

/* _print.scss:103 */
$border-width
$black

More in Bootstrap Badges

Bootstrap 4 & 5