Badges are small buttons that are used to promote particular content. It is the small count and labeling component that are mostly used in documentation or built-in website
To create badges with bootstrap we need to first inclus bootstrap5 css and js files inside our file, then we can apply badge class to our widgets.
Let's create an html file badge.html
Let's include bootstrap5 css and js file file
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> |
Add badge to file
To add badge to file we need to use badge class of bootstrap
<h2>Badge</h2> <h1>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h1> <h2>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h2> <h3>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h3> <h4>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h4> <h5>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h5> <h6>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h6> |
Now run file in your browser it will show below output
 |
Create contextual badges
To create contextual and pill badges we will use the class bg-pill.
<div class = "container"> <h2>Contextual Badges</h2> <span class = "badge bg-primary">Primary Badge</span> <span class = "badge bg-secondary">Secondary Badge</span> <span class = "badge bg-success">Success Badge</span> <span class = "badge bg-danger">Danger Badge</span> <span class = "badge bg-warning">Warning Badge</span> <span class = "badge bg-info">Info Badge</span> <span class = "badge bg-light">Light Badge</span> <span class = "badge bg-dark">Dark Badge</span> </div> </br> <div class = "container"> <h2>Pill Badges</h2> <span class = "badge bg-pill bg-primary">Primary Badge</span> <span class = "badge bg-pill bg-secondary">Secondary Badge</span> <span class = "badge bg-pill bg-success">Success Badge</span> <span class = "badge bg-pill bg-danger">Danger Badge</span> <span class = "badge bg-pill bg-warning">Warning Badge</span> <span class = "badge bg-pill bg-info">Info Badge</span> <span class = "badge bg-pill bg-light">Light Badge</span> <span class = "badge bg-pill bg-dark">Dark Badge</span> </div> |
 |
How can we create badge inside a button?
To add badge inside button we will first create a button then add span class inside button text with badge type bg-danger, bg-light classes.
<div class = "container"> <h2>Badge inside a Button</h2> <button type = "button" class = "btn btn-info"> Home <span class = "badge bg-danger">26</span> </button> <button type = "button" class = "btn btn-info"> Messages <span class = "badge bg-light">19</span> </button> <button type = "button" class = "btn btn-info"> Messages <span class = "badge bg-danger border border-light rounded-circle">9</span> </button> </div> |
 |
Complete Example code
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Badge Example</title> </head> <body> <div class = "container"> <h2>Badge</h2> <h1>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h1> <h2>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h2> <h3>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h3> <h4>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h4> <h5>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h5> <h6>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h6> </div> </br> </br> </br> <div class = "container"> <h2>Contextual Badges</h2> <span class = "badge bg-primary">Primary Badge</span> <span class = "badge bg-secondary">Secondary Badge</span> <span class = "badge bg-success">Success Badge</span> <span class = "badge bg-danger">Danger Badge</span> <span class = "badge bg-warning">Warning Badge</span> <span class = "badge bg-info">Info Badge</span> <span class = "badge bg-light">Light Badge</span> <span class = "badge bg-dark">Dark Badge</span> </div> </br> <div class = "container"> <h2>Pill Badges</h2> <span class = "badge bg-pill bg-primary">Primary Badge</span> <span class = "badge bg-pill bg-secondary">Secondary Badge</span> <span class = "badge bg-pill bg-success">Success Badge</span> <span class = "badge bg-pill bg-danger">Danger Badge</span> <span class = "badge bg-pill bg-warning">Warning Badge</span> <span class = "badge bg-pill bg-info">Info Badge</span> <span class = "badge bg-pill bg-light">Light Badge</span> <span class = "badge bg-pill bg-dark">Dark Badge</span> </div> </br> </br> <div class = "container"> <h2>Badge inside a Button</h2> <button type = "button" class = "btn btn-info"> Home <span class = "badge bg-danger">26</span> </button> <button type = "button" class = "btn btn-info"> Messages <span class = "badge bg-light">19</span> </button> <button type = "button" class = "btn btn-info"> Messages <span class = "badge bg-danger border border-light rounded-circle">9</span> </button> </div> </br> </br> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html> |
Conclusion: We created different types of Badges using css and bootstrap5 classes.
|
Article Contributed By :
|
|
|
|
|
574 Views |
|