W3.CSS — Badges

Basic Badge

<span class="w3-badge w3-red">4</span>
<span class="w3-badge w3-blue">7</span>
<span class="w3-badge w3-green">12</span>

Badge with Text

<button class="w3-button w3-blue">
    Messages <span class="w3-badge w3-red">5</span>
</button>

Badge Sizes

<span class="w3-badge w3-red w3-small">1</span>
<span class="w3-badge w3-blue w3-medium">5</span>
<span class="w3-badge w3-green w3-large">10</span>

Badge Colors

<span class="w3-badge w3-red">Red</span>
<span class="w3-badge w3-pink">Pink</span>
<span class="w3-badge w3-purple">Purple</span>
<span class="w3-badge w3-deep-purple">Deep Purple</span>
<span class="w3-badge w3-indigo">Indigo</span>
<span class="w3-badge w3-blue">Blue</span>
<span class="w3-badge w3-light-blue">Light Blue</span>
<span class="w3-badge w3-cyan">Cyan</span>
<span class="w3-badge w3-teal">Teal</span>
<span class="w3-badge w3-green">Green</span>
<span class="w3-badge w3-light-green">Light Green</span>
<span class="w3-badge w3-lime">Lime</span>
<span class="w3-badge w3-yellow">Yellow</span>
<span class="w3-badge w3-amber">Amber</span>
<span class="w3-badge w3-orange">Orange</span>
<span class="w3-badge w3-deep-orange">Deep Orange</span>

Badge Examples

<!-- Notification badge -->
<div class="w3-container">
    <h3>Notifications <span class="w3-badge w3-red">3</span></h3>
    <p>You have 3 new notifications</p>
</div>

<!-- Badge on list item -->
<div class="w3-container">
    <h3>Messages <span class="w3-badge w3-blue">12</span></h3>
    <ul class="w3-ul">
        <li>Message 1 <span class="w3-badge w3-red">New</span></li>
        <li>Message 2 <span class="w3-badge w3-green">Read</span></li>
        <li>Message 3 <span class="w3-badge w3-orange">Pending</span></li>
    </ul>
</div>

Badge with Icons

<button class="w3-button w3-blue">
    <i class="fa fa-bell"></i> Alerts <span class="w3-badge w3-red">7</span>
</button>

Mini Practice

Create HTML code that:

Creates badges with different numbers
Adds badges to buttons
Uses badges in a list
Creates notification-style badges

Up Next

Next: Learn about W3.CSS Labels.

Frequently Asked Questions about Badges

What is Badges in W3.CSS?

Badges is a fundamental concept in W3.CSS. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Badges?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Badges.

Why is Badges important in W3.CSS?

Badges is essential for W3.CSS development. Understanding this concept will help you write better code and solve real-world problems more effectively.