Badges

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New

html

<h1>Example heading <span class="badge bg-secondary">New</span></h1>

html

<h2>Example heading <span class="badge bg-secondary">New</span></h2>

html

<h3>Example heading <span class="badge bg-secondary">New</span></h3>

html

<h4>Example heading <span class="badge bg-secondary">New</span></h4>

html

<h5>Example heading <span class="badge bg-secondary">New</span></h5>

html

<h6>Example heading <span class="badge bg-secondary">New</span></h6>

On buttons

CODE

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-warning">4</span>
</button>

Position

Use utilities to modify a .badge and position it in the corner of a link or button.

CODE

html

<button type="button" class="btn btn-success position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

You can also replace the .badge class with a few more utilities without a count for a more generic indicator.

CODE

html

<button type="button" class="btn btn-warning position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Color options

Primary Secondary Tertiary Success Info Warning Danger Light Dark

CODE

html

<span class="badge text-bg-primary">Primary</span>

html

<span class="badge text-bg-secondary">Secondary</span>

html

<span class="badge text-bg-tertiary">Tertiary</span>

html

<span class="badge text-bg-success">Success</span>

html

<span class="badge text-bg-info">Info</span>

html

<span class="badge text-bg-warning">Warning</span>

html

<span class="badge text-bg-danger">Danger</span>

html

<span class="badge text-bg-light">Light</span>

html

<span class="badge text-bg-dark">Dark</span>

Pill badges

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

Primary Secondary Tertiary Success Info Warning Danger Light Dark

CODE

html

<span class="badge rounded-pill text-bg-primary">Primary</span>

html

<span class="badge rounded-pill text-bg-secondary">Secondary</span>

html

<span class="badge rounded-pill text-bg-tertiary">Tertiary</span>

html

<span class="badge rounded-pill text-bg-success">Success</span>

html

<span class="badge rounded-pill text-bg-info">Info</span>

html

<span class="badge rounded-pill text-bg-warning">Warning</span>

html

<span class="badge rounded-pill text-bg-danger">Danger</span>

html

<span class="badge rounded-pill text-bg-light">Light</span>

html

<span class="badge rounded-pill text-bg-dark">Dark</span>

Theme Builder

Personalize Material Style to reflect your product's brand identity.

CONTENTS