What are badges in bootstrap? – Create your first bootstrap badge

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 :

Badges Bootstrap

That’s how you can create badges in bootstrap.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: