Answer»
Bootstrap badges are used for adding additional information. Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Badges</h2>
<h1>Welcome to InterviewBit<span class="badge bg-secondary">New</span></h1>
</div>
</body>
</html>
| Tag Name | Description | Code |
|---|
| badge | Add a badge of the same size as the previous parent element. |
<h1>Heading text <span class="badge badge-secondary">Welcome to InterviewBit</span></h1> |
|---|
| badge-pill | Badge-pill is used for making badges more rounded. |
<span class="badge badge-pill badge-light">Welcome to InterviewBit</span> |
|---|
| badge-primary | Badge-primary is used to add a batch to the primary message. |
<span class="badge badge-primary">Welcome to InterviewBit</span> |
|---|
| badge-secondary | Badge-secondary is used to add a batch to the secondary message. |
<span class="badge badge-badge-secondary">Welcome to InterviewBit</span> |
|---|
| badge-success | To display a badge indicating success. |
<span class="badge bg-success">Welcome to InterviewBit</span> |
|---|
| badge-warning | Badge style to indicate a warning. |
<span <span class="badge bg-success">Welcome to InterviewBit</span> |
|---|
| Badge danger | Badge style to indicate danger. |
<span class="badge bg-danger">Welcome to InterviewBit</span> |
|---|
| badge-light | Badge style to indicate light background. |
<span class="badge bg-light text-dark">Welcome to InterviewBit</span> |
|---|
| badge-dark | Badge style to indicate dark background. |
<span c<span class="badge bg-light text-dark">Welcome to InterviewBit</span> |
|---|
|
