Bootstrap 5-Badges


Bootstrap 5 Badges uses to add extra information to any type of material. Use the ".badge" and contextual classes within components to create rectangular badges. The scale of a badge must match the size of its parent element.

Badges in Heading

Bootstrap 5 badges use to know more information about heading. It places in the span tag according to heading size.

Example

<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<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">
<h1> Bootstrap 5 Tutorial <span class = "badge bg-info"> start </span>
</h1>
<h2> Bootstrap 5 Tutorial <span class = "badge bg-info"> start </span>
</h2>
<h3> Bootstrap 5 Tutorial <span class = "badge bg-info"> start </span>
</h3>
<h4> Bootstrap 5 Tutorial <span class = "badge bg-info"> start </span>
</h4>
<h5> Bootstrap 5 Tutorial <span class = "badge bg-info"> start </span>
</h5>
<h6> Bootstrap 5 Tutorial <span class = "badge bg-info"> start </span>
</h6>
</div>
</body>
</html>


Output

 Bootstrap 5 Example

Bootstrap 5 Tutorial start

Bootstrap 5 Tutorial start

Bootstrap 5 Tutorial start

Bootstrap 5 Tutorial start

Bootstrap 5 Tutorial start
Bootstrap 5 Tutorial start


Different types of badges

Type Description
Contextual Badges Bootstrap 5 badges give extra information about the parent element. Contextual badges provide different background colors as per user requirements.
Example <span class = "badge bg-primary">
Bootstrap 5 pill Badges Bootstrap 5 badges placed with the parent element for small information. We can use the "badge" class with the "rounded-pill" class to look pill size badges.
Example <span class = "badge rounded-pill bg-info"> Value </span>
Badges in Button Bootstrap 5 badges are used inside of the button. The button function displays extra information about the button function. For example, the button displays badges with unread messages (numbers) of the web function.
Example:
<h5> Bootstrap 5 Badges in Button </h5>
<button type="button" class="btn btn-info position-relative mt-2">
Message
<span class="position-absolute top-1 start-95 translate-middle badge rounded-pill bg-secondary"> 50+
</span>
</button>