In this article, we will see the use of badges as a way to alert and attract users’ attention. At the end of this article, you will be able to add badges to your web page using the Bootstrap Badge class
You may have seen badges to e-commerce sites to attract user’s attention like 90% off on a particular product. Similarly, maybe you want to alert your users about some information.
Bootstrap components allow us to keep users informed using badge class. We can badges which allow us to draw user’s attention to the latest updates to our web page. Bootstrap provides different types of badges such as alert, error, and warning messages. Badges are an easy and best way of adding a small amount of information (it can be the latest update, new product, etc.) to your website to attract the attention of visitors.
As an example, you can see in the above image we have added two badges after the name of the pizza. We have the red-colored badge drawing the attention of the users. It highlights that the pizza is hot and fresh. And we have added one more badge that shows the price of the pizza. This can be done by using a badge.
In the above image, the red one is created by using a span with the class badge and
badge-danger. You can also use the various other colors that are built into the bootstrap framework for creating badges of different colors. You can also use a badge pill which creates a rounded rectangle as you see in the above image which indicates the price of the pizza, and that can be done by applying the badge,
badge-pill class to it with the badge class.
<span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-secondary">$4.99</span>
Program code to add badges to our web page.
<div class="row row-container align-self-center m-5"> <div class="col-6 col-sm-2 col-md-2"> <img class="d-flex img-thumbnail align-self-center" src="img/uthappizza.png" alt="img/uthappizza.png"> </div> <div class="media col col-md-5"> <div class="media-body"> <h2 class="media-heading">Uthappizza <span class="badge bg-danger">Hot </span> <span class="badge rounded-pill bg-secondary"> $4.99</span></h2> <p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p> </div> </div> </div>
In the above code, we have to use the badge class of bootstrap components to add badges to our web page. So that we can highlight some information for our visitors to our website. Going to the index.html page, right there in the very first line content row. After the name of the pizza, I’m going to add badges to the span tag with the class badge badge-danger. And then write the badge information there.
I have written as HOT. It will add a red-colored badge to our web page. I’m going to add one more badge for its price, I’ll use a badge pill to add a rounded badge. To add rounded badge with grey color use class badge
badge-secondary, and include the price of the pizza on our web page. Now save the changes and take a quick look at your web page. Going to your web page, you can see that by adding the badges. We have created the red-colored badge for HOT and then the grey-colored one for its price.
You can also create different badges by changing background class.
<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>
So, this is a nice way of adding badges to our webpage and attracting our users.