Bootstrap 4 Badge Tutorial
Badges are text boxes with background colors used for different purposes. From end user perspective generally these badges are used for highlighting specific content within a block of text. Administrators use badges to showcase pending tasks something like a notification shown on iOS apps. Bootstrap allows to create badges in multiple ways, let us explain all possible ways with code and demo.
Bootstrap 4 combines labels and badges components offered in version 3. Also it was referred as tags in the earlier version 4. This article explains with Bootstrap 4.0 beta version.
Default Bootstrap Badges
The “badge” class is the base CSS class should be used to identify a HTML element as a badge. This can be used on text elements like headings and paragraph to add a label next to the content. Below is the code for creating default badges in Bootstrap 4 next to the headings.
<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <!-- Start of Badges --> <h1>This is H1 Heading <span class="badge badge-default">New</span></h1> <h2>This is H2 Heading <span class="badge badge-default">New</span></h2> <h3>This is H3 Heading <span class="badge badge-default">New</span></h3> <h4>This is H4 Heading <span class="badge badge-default">New</span></h4> <h5>This is H5 Heading <span class="badge badge-default">New</span></h5> <h6>This is H6 Heading <span class="badge badge-default">New</span></h6> <!-- End of Badges --> <!-- Bootstrap 4 Scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
The default Bootstrap badges will look like below:
Offer: Get 92% discount of Mobirise Bootstrap site builder.
Bootstrap Contextual Color Badges
The default badge will have light grey color. But you don’t need to settle with only one color – Bootstrap 4 allows you to use contextual classes to add many more colors with primary, secondary, success, info, warning, danger, light and dark like below.
The code the contextual badges is given below:
<p class="badge badge-secondary">Secondary Badge</p> <p class="badge badge-primary">Primary Badge</p> <p class="badge badge-success">Success Badge</p> <p class="badge badge-info">Info Badge</p> <p class="badge badge-warning">Warning Badge</p> <p class="badge badge-danger">Danger Badge</p> <p class="badge badge-light">Light Badge</p> <p class="badge badge-dark">Dark Badge</p>
Bootstrap Contextual Color Pill Badges
By default the badges are in square shape with slight radius in the corners. If you want rounded corner badges in pill shape then just use “badge-pill” class like below:
<p class="badge badge-pill badge-secondary">Secondary Pill Badge</p> <p class="badge badge-pill badge-primary">Primary Pill Badge</p> <p class="badge badge-pill badge-success">Success Pill Badge</p> <p class="badge badge-pill badge-info">Info Pill Badge</p> <p class="badge badge-pill badge-warning">Warning Pill Badge</p> <p class="badge badge-pill badge-danger">Danger Pill Badge</p> <p class="badge badge-pill badge-light">Light Pill Badge</p> <p class="badge badge-pill badge-dark">Dark Pill Badge</p>
The pill badges will look like below on browser:
Badge with Counter
The Bootstrap version 4.0 allows you to create badges with counters by default as shown below.
Below is the code for badge with counter:
<button class="btn"> Total Emails <span class="badge badge-secondary">200</span> </button><br><br> <button class="btn"> Unread Emails <span class="badge badge-danger">100</span> </button><br><br> <button class="btn"> Read Emails <span class="badge badge-success">100</span> </button>
That’s Not All
It is not necessary to use badges at the end of text content. Actually you can use in-between the paragraph like a text highlighter.
Also you can add font awesome icons in front and use it like a buttons with icons. Remember, you should link font awesome CSS in your page for using these icons.
<p style="font-size:2rem;"><span class="badge badge-info"><i class="fa fa-camera-retro"></i> Take a Picture</span></p> <p style="font-size:2rem;"><span class="badge badge-warning"><i class="fa fa-shower"></i> Take a Shower</span></p> <p style="font-size:2rem;"><span class="badge badge-primary"><i class="fa fa-dollar"></i> Donate a Dollar</span></p> <p style="font-size:2rem;"><span class="badge badge-danger"><i class="fa fa-twitter"></i> Send a Tweet</span></p> <p style="font-size:2rem;"><span class="badge badge-secondary"><i class="fa fa-youtube"></i> Watch a Video</span></p> <p style="font-size:2rem;"><span class="badge badge-success"><i class="fa fa-file"></i> Upload a File</span></p> <p style="font-size:2rem;"><span class="badge badge-light"><i class="fa fa-facebook"></i> Connect with Facebook</span></p> <p style="font-size:2rem;"><span class="badge badge-dark"><i class="fa fa-twitter"></i> Follow in Twitter</span></p>
It will produce the result like below on the browser:
