Code has been added to clipboard!

Understanding and Mastering the Bootstrap Badge

Reading time 3 min
Published Nov 9, 2017
Updated Oct 2, 2019

Bootstrap badges display additional information next to a category, a button, or another element. It's informative and clear, but compact enough not to make the page look overstuffed.

Bootstrap labels serve a similar function to add information to a string of text. Using Bootstrap badges and labels is easy. You have to know which classes to apply and how to style the container if the default version does not seem like a perfect choice.

Bootstrap Badge: Main Tips

  • Using Bootstrap 4, you can create badges and labels.
  • Bootstrap 4 badges and labels display additional information.
  • Both of them scale to adjust to the element size.

Creating Bootstrap Badges

Badges are used to add extra information to content and are created by using .badge Bootstrap span class along with a contextual class (for example, .badge-success) on a <span> element.

Example
<span class="badge badge-success">Successfully created badge!</span>

Adjusting To Match Element

Imagine how ridiculous it would be if badges of exactly the same size would be displayed next to the body text and, say, Header 1! Luckily, one great quality Bootstrap badges have is their ability to scale to match the size of the parent element (if there is any).

In the code example below you can see badges applied to six different levels of headings. Every time the level goes down, the badge shrinks accordingly:

Example

<h1>Heading 1<span class="badge badge-secondary">Ding</span></h1>
<h2>Heading 2<span class="badge badge-secondary">Ding</span></h2>
<h3>Heading 3<span class="badge badge-secondary">Ding</span></h3>
<h4>Heading 4<span class="badge badge-secondary">Ding</span></h4>
<h5>Heading 5<span class="badge badge-secondary">Ding</span></h5>
<h6>Heading 6<span class="badge badge-secondary">Ding</span></h6>

Modifying The Shape

Bootstrap badge elements are shaped like rectangles with gently rounded corners. If you feel like an even rounder, pill-like shape of the container will work better for your page, you can try using .badge-pill class, which will modify the shape by rounding the sides. See how it would look by opening the code example below in the code editor:

Example
<span class="badge badge-pill badge-success">Successfully created badge!</span>

Using Badges In Elements

Bootstrap 4 badges are especially useful when you need to distinguish info inside an element that is already rather small, for example, a button. Due to being compact, they don't make your design seem overloaded. See an example of placing a badge inside a Dashboard button below:

Example
<button class="btn btn-success" type="button">
  Dashboard <span class="badge badge-light">2</span>
</button>

Use of Labels

Bootstrap labels add information about HTML elements.

Apply .label with the following options: .label-default, .label-primary, .label-success, .label-info, .label-warning or .label-danger inside the <span> element:

The following code example shows the use of Bootstrap labels:

Example
<h1>Article Title <span class="label label-default">Hot</span></h1>
<h2>Article Title <span class="label label-default">Hot</span></h2>
<h3>Article Title <span class="label label-default">User's Comment</span></h3>
<h4>Article Title <span class="label label-default">Author's Choice</span></h4>
<h5>Article Title <span class="label label-default">Weekly Report</span></h5>
<h6>Article Title <span class="label label-default">Modified</span></h6>

Bootstrap Badge: Summary

  • You can create functional badges by adding Bootstrap span class = "badge" to your elements.
  • Bootstrap 4 adds labels with <span class="label"> code.
  • They often come in handy when you need to display additional information, for example, a number of new comments on your blog post.
  • If a Bootstrap badge or label has a parent element, it will adapt to its size.
Learn Bootstrap
Tutorial
Fonts
Tables
Images
Jumbotron
Alerts
Colors
Button Class
Button Groups
Badges
Progress Bars
Pagination
List Groups
Cards
Dropdown
Accordion
Tabs
Navbar
Forms
Input
Carousel
Modal
Tooltip
Popover
Scrollspy
Utility Classes
Grid: Introduction
Grid System
Horizontal Grid
Extra Small Grid
Small Grid
Medium Grid
Large Grid
Extra Large Grid
Grid Example