Bootstrap 4 Badges Component Intro
The labels or badges can be used for showing some additional information, count etc. related to the specific content. For example, showing the count of inbox messages ahead of “Message” text. Similarly, showing a distinct “New Arrival” label ahead of new products launched on your website etc.
In Bootstrap 4, the badges can be created by using .badge class and to color the badge or label, use the contextual classes of the badge e.g. .badge-success, badge-primary.
Keep reading the next section for looking at the live demos of creating badges in different colors and sizes and in various components.
The demo of simple badge in Bootstrap 4
Let me start by creating simple badges ahead of text by using .badge class. The .badge class along with a contextual class is used in a <span> tag (an inline HTML element). So, the content/text used in the span appears inline with main content and styled as rectangle box.
See the following example where badges are attached with the h1 to h6 headings:
See online demo and code
Did you notice in the example, all badges though used the same classes, however, their size varies according to the size of parent elements. This is due to using relative font sizing and em units.
The markup of badges demo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="container"> <h3>The Badges / Label Demo</h3> <h6>Smart Watches <span class="badge badge-secondary">New arrivals</span></h6> <h5>LED TVs <span class="badge badge-secondary">New</span></h5> <h4>Gadgets <span class="badge badge-secondary">3 New</span></h4> <h3>Notebook <span class="badge badge-secondary">Updates</span></h3> <h2>Tablet Modal <span class="badge badge-secondary">Coming Up</span></h2> <h1>Smart Phone Modal <span class="badge badge-secondary">New</span></h1> </div> |
Creating colored badges by using other contextual classes
The following example shows using the other built-in contextual classes for displaying badges in various colors. These contextual classes for badges include:
- badge-dark
- badge-secondary
- badge-warning
- badge-light
- badge-success
- badge-danger
- badge-primary
- badge-info
See the demo below where all these classes are used:
See online demo and code
The markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<h6>Smart Watches <span class="badge badge-dark">New arrivals</span></h6> <h5>LED TVs <span class="badge badge-secondary">New</span></h5> <h4>Gadgets <span class="badge badge-warning">3 New</span></h4> <h3>Notebook <span class="badge badge-light">Updates</span></h3> <h2>Tablet Modal <span class="badge badge-success">Coming Up</span></h2> <h1>Smart Phone Modal <span class="badge badge-danger">New</span></h1> <div>Inbox <span class="badge badge-primary">2007</span><div> <div>Outbox <span class="badge badge-info">5</span></div> |
The example of creating rounded labels
The Bootstrap 4 has another built-in class for creating rounded badges. The class name is .badge-pill that you may use in addition to the .badge and .badge-[context] classes. Have a look at the demo for experiencing it:
See online demo and code
The markup with badge-pill class:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="container"> <h3>The Round Badges / Label Demo</h3> <div>Inbox <span class="badge badge-pill badge-primary">525</span><div> <div>Sent Items <span class="badge badge-pill badge-info">23</span></div> <div>Spam <span class="badge badge-pill badge-danger">1001</span></div> <div>Important <span class="badge badge-pill badge-success">8</span></div> <div>Starred <span class="badge badge-pill badge-warning">11</span></div> </div> |
Until now, we have seen using badges in headings and <div> tags. You may also use Bootstrap badges in buttons and links.
In the buttons demo below, various buttons are given their own contextual classes while badges are created by <span> tags, as in above examples. For each badge, the contextual class is also used along with .badge-pill in two buttons:
See online demo and code
The code:
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 28 29 30 31 32 33 34 35 36 37 |
<div class="container"> <h3>Buttons with badges</h3> <button type="button" class="btn btn-primary"> Inbox <span class="badge badge-light">4</span> </button> <button type="button" class="btn btn-info"> Sent <span class="badge badge-pill badge-dark">4</span> </button> <button type="button" class="btn btn-danger"> Spam <span class="badge badge-warning">4</span> </button> <button type="button" class="btn btn-success"> Important <span class="badge badge-danger">4</span> </button> <button type="button" class="btn btn-warning"> Starred <span class="badge badge-pill badge-light">4</span> </button> </div> |
Similarly, you may use badges in the button dropdowns in Bootstrap. Have a look:
See online demo and code
Get the complete code from the demo page.
Note: you need to include the Bootstrap JS, popper.js along with jQuery in order to create the dropdowns.
Using badge Bootstrap classes in links
You may also use badge classes in <a> links. In that case, you may create actionable badges with various colors and hovering effects.
Have a look at this demo where I replaced <span> tags in one of the above examples by <a>s and used the badge classes:
See online demo and code
The code:
1 2 3 4 5 6 7 8 9 10 11 |
<h3>The link badges demo</h3> <div>Bootstrap Tutorials <a class="badge badge-info" href="https://www.jquery-az.com/bootstrap-4/">70</a></div> <div>jQuery Tutorials <a class="badge badge-pill badge-danger" href="https://www.jquery-az.com/jquery-tips/">150</a></div> <div>JavaScript <a class="badge badge-warning" href="https://www.jquery-az.com/javascript-tutorials/">19</a></div> <div>CSS <a class="badge badge-dark" href="https://www.jquery-az.com/css-tutorials/">23</a></div> <div>PHP Tutorials <a class="badge badge-pill badge-success" href="https://www.jquery-az.com/php-tutorials/">25</a></div> |
See the links in action with complete code in the example page.
The badges can also be added in the navbar. This can be useful for different situations like adding a new menu item and showing it as “new” or “hot” or some other information.
Moreover, you may use the <sup> and <sub> tags of HTML for displaying badges as superscripts or subscripts and navbars can be an ideal place for that.
This is what I am going to show you in the next example. A navbar is created with a few menu items that contain badges with <sub> and <sup> tags:
See online demo and code
The markup for the navbar with badges:
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<div class="container"> <h3>Demo of badges in navbar</h3> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Business</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Tech <span class="sr-only">(current)</span><span class="nav-link badge badge-danger">New</span></a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Pro <span class="sr-only">(current)</span><sup><span class="nav-link badge badge-success">Spe</span></sup></a> </li> <li class="nav-item dropdown"> <button class="btn btn-light dropdown-toggle" type="button" id="btnDropdownDemo" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tutorials <sub><span class="nav-link badge badge-warning">7</span></sub> </button> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery <sup><span class="nav-link badge badge-pill badge-warning">7</span></sup></a> <a class="dropdown-item" href="https://www.jquery-az.com/html-tutorials/">HTML <sub><span class="nav-link badge badge-info">7</span></sub></a> <a class="dropdown-item" href="#">CSS <sup><span class="nav-link badge badge-secondary">7</span></sup></a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://www.jquery-az.com/python-tutorials/">Python <sub><span class="nav-link badge-pill badge badge-primary">7</span></sub></a> <a class="dropdown-item" href="https://www.jquery-az.com/java-tutorials/">Java <sup><span class="nav-link badge badge-pill badge-success">7</span></sup></a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://www.jquery-az.com/php-tutorials/">PHP <sup><span class="nav-link badge badge-warning">7</span></sup></a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://www.jquery-az.com/vba-excel-tutorials/">Excel <sub><span class="nav-link badge badge-pill badge-light">7</span></sub></a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Go Tutorials <span class="badge badge-dark">Underway</span></a> </li> </ul> </div> </nav> </div> |
See the output and code on the example page.
The example of badges in list groups
The final example shows using the badges in the Bootstrap list group. For that, a list is created by using various contextual classes of the list in Bootstrap. With each list item, a badge is also created with its own context class:
See online demo and code
You may grab the complete code from the demo page.