Bootstrap 5 TutorialLesson 14Free preview

BS5 Badges

This lesson is part of Bootstrap · All levels

Summary

A badge is a small label that displays a number or category such as the number of notifications on the menu. The basic class is .badge with the color theme such as .bg-primary or .bg-success. Since Bootstrap 5.2, it has provided automatic text color contrast with the background badge. (.text-bg-)

Key points

The basic class of badge.
The color badge uses .bg-* because the badge no longer has a special class .badge-primary.
He made a round pill-shaped badge. (.rounded-pill)
It has been automatically contrasts since v5.2. (.text-bg-)
Badges are often placed inside links or navbars as a number marker.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.