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.
<!DOCTYPE html> <html>
<head>
<link href=
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.
<!DOCTYPE html> <html>
<head>
<link href=
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