Bootstrap 5 Badges Background colors
Last Updated :
30 Nov, 2022
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 =
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 =
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
Share your thoughts in the comments
Please Login to comment...