Add a notification count badge to a button

Description: Add a red round badge with the number 5 on the top right corner of an “Inbox” button.

Hint:

• Use position-relative on the button and position-absolute top-0 start-100 translate-middle on the badge.

---

Solution

<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">
    5
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

How it works

• top-0 start-100 puts the badge on the corner, and translate-middle moves it half of its size back, so it sits on the corner.
• The hidden text tells screen reader users what “5” means.

Read Badges and Utilities.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.