Hey, what’s up, guys. In this post, I will tell you about bootstrap badges. I will explain what bootstrap badges are and how you can create bootstrap badges.
What are badges in bootstrap?
Badges are like small labeling components. You can think of a badge as a label with rounded corners. You can use badges to show count or add supplementary information to any content. Badges use relative font sizing and em units so that they scale to match the size of the immediate parent element.
How to create badges in bootstrap?
Now, I will create a simple web page to show how can you create badges in bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous">
<title>Bootstrap badges</title>
</head>
<body>
<div class="p-5">
<div class="card" style="background-color: #F2EBEA;">
<div class="row g-0">
<div class="col-md-4">
<img src="pizza.jpg" class="img-fluid" alt="pizza">
</div>
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title">Veg Loaded
<span class="badge bg-danger">NEW</span>
<span class="badge rounded-pill bg-secondary">$5.99</span></h2>
<p class="card-text">You've been missing out on this for far too long. It's time to try a new pizza. Get your hands on our Veg Loaded Pizza today. We have all the cheesy, pepperoni taste you love and the vegetables you need. It's the best of both worlds, no more compromise!</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here, I have created a card and inside the card, I have used two badges one for indicating that the item is new and one for the price of the item.
Output :
That’s how you can create badges in bootstrap.
Goodbye.
DeveloperXon 
Leave a Reply