Bootstrap 5 Badges Over Button

Uncategorized / Leave a Comment

Bootstrap 5 badges over the button and bootstrap circle badge are easy to apply over the icon with background and custom colors. We can use the .rounded-pill class to make pill badges more rounded.

Bootstrap 5 badges alert examples with three beautiful designs such as “Top Right Corner” “Top Left Corner” and “Top Center”.

HTML

<div class="mx-auto d-table w-50 mt-5">
    <!-- Badge Top Right Corner -->
    <button type="button" class="btn btn-dark position-relative">
      Badge Top Right Corner <span class="badge position-absolute top-0 start-100 translate-middle bg-warning">823</span>
    </button>

    <hr class="mt-5 mb-5">

    <!-- Badge Top left Corner -->
    <button type="button" class="btn btn-primary position-relative">
      Badge Top left Corner <span class="badge position-absolute top-0 start-0 translate-middle bg-danger">974</span>
    </button>

    <hr class="mt-5 mb-5">

    <!-- Badge Top Center -->
    <button type="button" class="btn btn-warning position-relative">
      Badge Top Center <span class="badge position-absolute top-0 start-50 translate-middle bg-dark">774</span>
    </button>
</div>

Must Read