**`Bootstrap`** is a CSS framework built with a collection of HTML, CSS, and JavaScript tools used for building scalable web applications.

A **`Badge`** is a component that provides additional information about something or is used as an indicator about certain information.

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" 
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
     crossorigin="anonymous">
    
</head>
<body>
    
    <span class="badge bg-primary">Primary</span>
    <span class="badge bg-secondary">Secondary</span>
    <span class="badge bg-success">Success</span>
    <span class="badge bg-danger">Danger</span>
    <span class="badge bg-warning text-dark">Warning</span>
    <span class="badge bg-info text-dark">Info</span>
    <span class="badge bg-light text-dark">Light</span>
    <span class="badge bg-dark">Dark</span>

    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 
    crossorigin="anonymous">
    </script>
</body>
</html>

codemirror

> By using the ` class="badge" `, we create a rectangular shape. we can also create different colors of badge using the bootstrap tags for different colors.

-  `class="badge bg-primary"` -  is for blue badge color 

- `class="badge bg-secondary"` -   is for grey badge color
- `class="badge bg-success"`  - is for green badge color
- `class="badge bg-danger"` - is for red badge color
- `class="badge bg-warning"` - is for yellow badge color
- `class="badge bg-info"` - is for skyblue badge color


# 
## Code sample

We will create a file and name it `home.html`. We can see this here:
>  Badges will be used here as an indicator for alerting 
purposes.

We are going to use `badge` to indicate numbers in the HTML button tag:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" 
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
     crossorigin="anonymous">
    
</head>
<body>
  
    
    <button type="button" class="btn btn-primary position-relative mt-5 mr-5">
      Cart
      <span class="position-absolute top-0 start-100 translate-middle badge  rounded-pill bg-danger">
        
        5
        <span class="visually-hidden">number of goods added</span>
      </span>
    </button>
    <button type="button" class="btn btn-primary position-relative mt-5 mr-5">
      inbox
      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        
        12+
        <span class="visually-hidden">Unread messages</span>
      </span>
    </button>

    <button type="button" class="btn btn-primary position-relative mt-5 mr-5">
      Active Users
      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        
        50
        <span class="visually-hidden">number of active users</span>
      </span>
    </button>
    

    
    
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 
    crossorigin="anonymous">
    </script>
</body>
</html>

What are Badges in Bootstrap?

Bootstrap badges are components used as indicators, providing additional information with varied colors like blue, grey, green, red, yellow, and skyblue.