---
title: "Badges in Bootstrap"  
description: "Badges in Bootstrap"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156607/badges-in-bootstrap  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 1 minute  

---

# Badges in Bootstrap

What are badges in [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel)? Why has it been used? State with the help of example.

## Replies

### Reply by Anonymous User

Badges are used to add additional information to any content. Sometimes, you may see that it is used as a tag in many web pages.

For the better understanding of badges of bootstrap let's have an example :

```
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
    <title></title>
</head>
<body>
    <div class='jumbotron'>
        <h1>Badges</h1>
        <span class='badge text-capitalize badge-danger'>danger</span>
        <span class='badge text-capitalize badge-dark'>dark</span>
        <span class='badge text-capitalize badge-info'>info</span>
        <span class='badge text-capitalize badge-light'>light</span>
        <span class='badge text-capitalize badge-pill'>pill</span>
        <span class='badge text-capitalize badge-primary'>primary</span>
        <span class='badge text-capitalize badge-success'>success</span>
        <span class='badge text-capitalize badge-warning'>warning</span>
        <span class='badge text-capitalize badge-secondary'>secondary</span>
    </div>
</body>
</html>
```

Hope this will help you.

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156607/badges-in-bootstrap

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
