Understanding and Mastering the Bootstrap Badge

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.

<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:

<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>

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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:

<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:

<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:

<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.