Bootstrap 5 Badges Background colors

Bootstrap 5 Badges Background colors provide different utility classes for backgrounds that help to enhance the appearance of a badge. The default background of any badge is ".bg-light", which can be used with text color utility, like .text-dark class, which helps to enhance its styling.

Badges Background Colors Classes: The Background colors class can be used with the help of the .bg-* class followed by the below classes:

bg-primary: This class is used to indicate primary information with blue color.
bg-secondary: This class is used to indicate secondary information with gray color.
bg-success: This class is used to indicate the successful completion of any task with a green color.
bg-danger: This class is used to indicate danger information with red color.
bg-warning: This class is used to indicate warning information with yellow color.
bg-info: This class is used to indicate any information that is not essential with light blue color.
bg-light: This class is used to add a light color background.
bg-dark: This class is used to add a dark color background.

Syntax: The * is replaceable with any one of the above Badges Background Colors Classes.

<span class="badge bg-*">
     ...
</span>

Example 1: This example describes the basic usage of the Bootstrap 5 Badges Background colors, where we have displayed all the background colors available for badges.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous" />
    <title>Bootstrap Badges</title>
</head>

<body class="text-center">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3 class="m-3">
          Bootstrap 5 Badges Background colors
      </h3>
    <span class="badge bg-primary p-3">
          Primary
      </span>
    <span class="badge bg-secondary p-3"> 
          Secondary 
      </span>
    <span class="badge bg-success p-3">
          Success 
      </span>
    <span class="badge bg-danger p-3">
          Danger 
      </span>
    <span class="badge bg-warning text-dark p-3"> 
          Warning
      </span>
    <span class="badge bg-info text-dark p-3">
          Info 
      </span>
    <span class="badge bg-light text-dark border border-dark p-3">
        Light 
      </span>
    <span class="badge bg-dark p-3">
          Dark
      </span>
</body>

</html>

Output:

Example 2: This example describes the use of different background utility classes to change the appearance of the badge.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
           crossorigin="anonymous">
    <title>Bootstrap Badges</title>
</head>

<body class="text-center">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h4 class="text-center m-3">sm|md|lg|xl|xxl
        Bootstrap 5 Badges Background colors
    </h4>

    <h4>GeeksforGeeks
        <span class="badge bg-primary">
            New
        </span>
    </h4>
    <h4>GeeksforGeeks
        <span class="badge bg-secondary">
            New
        </span>
    </h4>
    <h4>GeeksforGeeks
        <span class="badge bg-success">
            New
        </span>
    </h4>
    <h4>GeeksforGeeks
        <span class="badge bg-danger">
            New
        </span>
    </h4>
    <h4>GeeksforGeeks
        <span class="badge bg-warning text-dark">
            New
        </span>
    </h4>
    <h4>GeeksforGeeks
        <span class="badge bg-info text-dark">
            New
        </span>
    </h4>
    <h4>GeeksforGeeks
        <span class="badge bg-light text-dark 
                               border border-dark">
            New
        </span>
    </h4>
    <h4>GeeksforGeeks
        <span class="badge bg-dark">
            New
        </span>
    </h4>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/badge/#background-colors

Bootstrap 5 Badges Background colors

Explore