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