Overview

Additional options to extend Bootstrap Badges.

Basic

Badge styles are set in the .badge and .badge-{color} classes.

New New New New New New New New

        <span class="badge badge-light">New</span>
<span class="badge badge-primary">New</span>
<span class="badge badge-secondary">New</span>
<span class="badge badge-success">New</span>
<span class="badge badge-info">New</span>
<span class="badge badge-warning">New</span>
<span class="badge badge-danger">New</span>
<span class="badge badge-dark">New</span>
      

Light Style

Use the .badge and .badge-light-{color} classes to set the light style for the badge.

New New New New New New New

        <span class="badge badge-light-primary">New</span>
<span class="badge badge-light-secondary">New</span>
<span class="badge badge-light-success">New</span>
<span class="badge badge-light-info">New</span>
<span class="badge badge-light-warning">New</span>
<span class="badge badge-light-danger">New</span>
<span class="badge badge-light-dark">New</span>
      

Square Badge

Use .badge-square class to use a badge with same width and height.

5 5 5 5 5 5 5 5

        <span class="badge badge-square badge-light">5</span>
<span class="badge badge-square badge-primary">5</span>
<span class="badge badge-square badge-secondary">5</span>
<span class="badge badge-square badge-success">5</span>
<span class="badge badge-square badge-info">5</span>
<span class="badge badge-square badge-warning">5</span>
<span class="badge badge-square badge-danger">5</span>
<span class="badge badge-square badge-dark">5</span>
      

Circle Badge

Use .badge-circle class to use a badge with circle style.

5 5 5 5 5 5 5

        <span class="badge badge-circle badge-light">5</span>
<span class="badge badge-circle badge-primary">5</span>
<span class="badge badge-circle badge-secondary">5</span>
<span class="badge badge-circle badge-success">5</span>
<span class="badge badge-circle badge-info">5</span>
<span class="badge badge-circle badge-warning">5</span>
<span class="badge badge-circle badge-danger">5</span>
<span class="badge badge-circle badge-dark">5</span>
      

Outline Badge

Use .badge-outline class to use a badge with circle style.

5 5 5 5 5 5 5

        <span class="badge badge-circle badge-outline badge-primary">5</span>
<span class="badge badge-circle badge-outline badge-secondary">5</span>
<span class="badge badge-circle badge-outline badge-success">5</span>
<span class="badge badge-circle badge-outline badge-info">5</span>
<span class="badge badge-circle badge-outline badge-warning">5</span>
<span class="badge badge-circle badge-outline badge-danger">5</span>
<span class="badge badge-circle badge-outline badge-dark">5</span>
      

Size Options

Use .badge-sm or .badge-lg to change Badge size according to the Bootstrap standards.

New 3 4

        <span class="badge badge-primary badge-sm">New</span>
<span class="badge badge-primary badge-circle badge-sm">3</span>
<span class="badge badge-primary badge-square badge-sm">4</span>

<span class="badge badge-primary badge">New</span>
<span class="badge badge-primary badge-circle">3</span>
<span class="badge badge-primary badge-square ">4</span>

<span class="badge badge-primary badge-lg">New</span>
<span class="badge badge-primary badge-circle badge-lg">3</span>
<span class="badge badge-primary badge-square badge-lg">4</span>
      

Bootstrap Buttons

Use a badge with .badge-circle class in a Bootstrap Button element.

        <button class="btn btn-primary position-relative me-5">
  Button <span class="position-absolute top-0 start-0 translate-middle  badge badge-circle badge-danger">5</span>
</button>

<button class="btn btn-success position-relative me-5">
  Button <span class="position-absolute top-100 start-0 translate-middle  badge badge-circle badge-warning">5</span>
</button>

<button class="btn btn-danger position-relative me-5">
  Button <span class="position-absolute top-0 start-100 translate-middle  badge badge-circle badge-primary">5</span>
</button>

<button class="btn btn-warning position-relative">
  Button <span class="position-absolute top-100 start-100 translate-middle  badge badge-circle badge-success">5</span>
</button>
      

Inside Button

Use a badge with .badge-circle classes inside button.

        <button class="btn btn-primary me-5">
  Notifications <span class="badge badge-circle badge-warning ms-2">5</span>
</button>

<button class="btn btn-success me-5">
  Messages <span class="badge badge-circle badge-danger ms-2">4</span>
</button>

<button class="btn btn-danger me-5">
  Orders <span class="badge badge-circle badge-primary ms-2">4</span>
</button>

<button class="btn btn-danger me-5">
  Profile <span class="badge badge-circle badge-success ms-2">3</span>
</button>
      

Documentation v3.0.16