@@include("../partials/head.html")
@@include("../partials/doc-navbar.html")
@@include("../partials/doc-sidenav.html")

# Badges

Documentation and examples for badges, our small count and labeling component.

## Background colors

Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap’s default `.bg-light`, you’ll likely need a text color utility like `.text-dark` for proper styling. This is because background utilities do not set anything but `background-color`.

Primary Secondary Success Danger Warning Info Light Dark

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

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

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

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

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

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

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

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

## Pill badges

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

Primary Secondary Success Danger Warning Info Light Dark

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

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

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

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

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

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

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

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

## Buttons

Badges can be used as part of links or buttons to provide a counter.

     <!--
                              Button -->
                            <button type="button"
                              class="btn
                                btn-primary">
                            Notifications <span class="badge bg-secondary">4</span>
                            </button>

## Positioned

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

    <!--
                              Positioned -->
                            <button type="button"
                              class="btn
                                btn-primary 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.

    <!--
                              Positioned -->
                            <button type="button"
                              class="btn
                                btn-primary 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>

## Dot

Use `.badge-dot` classes on an `<a>` element quickly provide actionable badges with hover and focus states.

Primary Secondary Success Danger Warning Info Light Dark

    <!--
                              Primary badge -->
                            <span class="me-2"><span class="badge bg-dot bg-primary me-1"></span>
                            <span>Primary</span></span>

                            <!-- Secondary badge -->
                            <span class="me-2"><span class="badge bg-dot bg-secondary me-1"></span><span
                              class="text-secondary">Secondary</span></span>

                            <!-- Success badge -->
                            <span class="me-2"><span class="badge bg-dot bg-success me-1"></span><span
                              class="text-success">Success</span></span>

                            <!-- Danger badge -->
                            <span class="me-2"><span class="badge bg-dot bg-danger me-1"></span><span
                              class="text-danger">Danger</span></span>

                            <!-- Warning badge -->
                            <span class="me-2"><span class="badge bg-dot bg-warning me-1"></span><span
                              class="text-warning">Warning</span></span>

                            <!-- Info badge -->
                            <span class="me-2"><span class="badge bg-dot bg-info me-1"></span><span
                              class="text-info">Info</span></span>

                            <!-- Light badge -->
                            <span class="me-2"><span class="badge bg-dot bg-light me-1"></span><span
                              class="text-light">Light</span></span>

                            <!-- Dark badge -->
                            <span class="me-2"><span class="badge bg-dot bg-dark me-1"></span><span
                              class="text-dark">Dark</span></span>

## Simple Badge

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

# Example heading New

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

@@include("../partials/buy-template.html") @@include("../partials/scripts.html")