Bootstrap Badges
Bootstrap Badges are useful in almost all kinds of different websites now. They are, basically, numerical indicators that help us show the number of items associated a specific link.
For examples, a typical use of badges is to notify the number of unread messages in your inbox.
A basic can be added by using the .badge classes with the <span> element. See the sample code below for illustration:
1 2 3 4 5 | <h2>Badges</h2> <hr> <a href="#">News <span class="badge">5</span></a><br> <a href="#">Comments <span class="badge">10</span></a><br> <a href="#">Updates <span class="badge">2</span></a> |
Bootstrap Button Badge
The example below will tell you how to use badges with some buttons:
1 2 3 4 | <h2>Badges on Buttons</h2> <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button> <button type="button" class="btn btn-success">Success <span class="badge">3</span></button> <button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button> |
Bootstrap Contextual class badge example
1 2 3 4 5 6 7 8 | <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-success">Success</span> <span class="badge badge-danger">Danger</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span> <span class="badge badge-light">Light</span> <span class="badge badge-dark">Dark</span> |
Bootstrap badge Pill
1 2 3 4 5 6 7 | <ul class="list-group"> <li class="list-group-item">Inbox <span class="badge badge-pill badge-primary">500</span></li> <li class="list-group-item">Read <span class="badge badge-pill badge-success">400</span></li> <li class="list-group-item">Unread <span class="badge badge-pill badge-info">10</span></li> <li class="list-group-item">Spam <span class="badge badge-pill badge-warning">10</span></li> <li class="list-group-item">Trace <span class="badge badge-pill badge-secondary">10</span></li> </ul> |
Bootstrap badge size
1 2 3 4 5 6 7 | <h2>Badges Example</h2> <hr> <h2>Exciting Offers <span class="badge badge-danger">New</span></h2> <h3>Exciting Offers <span class="badge badge-secondary">New</span></h3> <h4>Exciting Offers <span class="badge badge-success">New</span></h4> <h5>Exciting Offers <span class="badge badge-warning">New</span></h5> <h6>Exciting Offers <span class="badge badge-info">New</span></h6> |
Bootstrap badges with icons
Bootstrap Labels
The labels are different from badges in the sense that they are generally non-numerical and tells you about the element itself rather than the items it is holding. They can be used for offering tips, counts etc.
The class .label can be used to add labels to your page.
1 2 3 4 5 6 | <h1>Update <span class="label label-default">New</span></h1> <h2>Update<span class="label label-default">New</span></h2> <h3>Update <span class="label label-default">New</span></h3> <h4>Update<span class="label label-default">New</span></h4> <h5>Update<span class="label label-default">New</span></h5> <h6>Update<span class="label label-default">New</span></h6> |
The label colors can also be changed by using the following contextual label classes:
- label-default
- label-primary
- label-success
- label-info
- label-warning
- label-danger
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Contextual Label</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Contextual Label Classes</h2> <span class="label label-default">Default Label</span> <span class="label label-primary">Primary Label</span> <span class="label label-success">Success Label</span> <span class="label label-info">Info Label</span> <span class="label label-warning">Warning Label</span> <span class="label label-danger">Danger Label</span> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html> |
Badges Headings
You can also use Badges with the heading tags (<h1>……<h6>). For this, along with the .badge you also need to use the .badge-secondary class within <span> elements>.
This will
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Badges Example</h2> <h1>h1 heading <span class="badge badge-secondary">New</span></h1> <h2>h2 heading <span class="badge badge-secondary">New</span></h2> <h3>h3 heading <span class="badge badge-secondary">New</span></h3> <h4>h4 heading <span class="badge badge-secondary">New</span></h4> <h5>h5 heading <span class="badge badge-secondary">New</span></h5> <h6>h6 heading <span class="badge badge-secondary">New</span></h6> </div> </body> </html> |
Contextual Badges
Here’s a list of contextual classes for colored badges:
- badge-primary
- badge-secondary
- badge-success
- badge-danger
- badge-warning
- badge-info
- badge-light
- badge-dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contextual Badges Example</h2> <span class="badge badge-primary">Primary Badge</span> <span class="badge badge-secondary">Secondary Badge</span> <span class="badge badge-success">Success Badge</span> <span class="badge badge-danger">Danger Badge</span> <span class="badge badge-warning">Warning Badge</span> <span class="badge badge-info">Info Badge</span> <span class="badge badge-light">Light Badge</span> <span class="badge badge-dark">Dark Badge</span> </div> </body> </html> |