Bootstrap Badges

Bootstrap badges are small, colorful indicators used to highlight important information within a web page. They can be used to display numerical counts, statuses, or contextual information. Here's how to use Bootstrap badges:

1. Basic Badge

To create a basic badge, use the .badge class:

<span class="badge bg-primary">Primary</span>

2. Badge Colors

Bootstrap provides contextual classes for different badge colors:

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

3. Pill Badges

You can create pill-shaped badges by adding the .rounded-pill class:

<span class="badge bg-primary rounded-pill">Primary</span>

4. Badge with Text

Badges can contain additional text alongside the contextual information:

<span class="badge bg-primary">New</span> Inbox messages

5. Badge with Links

You can turn a badge into a link by wrapping it in an anchor tag:

<a href="#" class="badge bg-primary">Link</a>

Conclusion

Bootstrap badges provide a simple and effective way to highlight important information and add visual emphasis to elements within a web page. By leveraging different colors, shapes, and styles, developers can create badges that enhance the overall user experience and improve the usability of their web applications.

Archive