Bootstrap Badges are small components used to provide a notification count or the status of an item within a web application.
They are an essential part of Bootstrap, a popular front-end framework, and can be easily added to any web page.
In this guide, we will explore the details of Bootstrap Badges, their properties, and how to use them effectively.
Introduction to Bootstrap Badges
Bootstrap Badges are simple components that come in the form of a small rounded label.
They can be used to highlight important information such as the number of items in a shopping cart or the status of a task.
They are similar to labels, but their rounded shape and small size make them more suited for providing quick information at a glance.
Bootstrap Badges are created using the <span> HTML tag and the .badge class.
They can be customized with different colors, sizes, and styles to match the design of your web page.
Basic Usage
The basic usage of Bootstrap Badges is straightforward.
To create a Bootstrap Badge, you simply need to add the .badge class to a <span> tag:
<span class="badge">Badge</span>This will create a basic Bootstrap Badge with the text “Badge” inside it.
The Badge will have a default style, including a background color of light gray and a font color of white.
Styling Badges
Bootstrap Badges can be styled using different colors, sizes, and styles to match the design of your web page.
The following are the most common ways to style Bootstrap Badges:
Colors:
To change the background color of the Badge, you can use the .badge-primary, .badge-secondary, .badge-success, .badge-danger, .badge-warning, .badge-info, .badge-light, and .badge-dark classes.
For example:
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>Sizes:
To change the size of the Badge, you can use the .badge-lg class to make the Badge larger, or the .badge-sm class to make the Badge smaller.
For example:
<span class="badge badge-lg">Large</span>
<span class="badge">Default</span>
<span class="badge badge-sm">Small</span>Pill Badges:
To create a Pill Badge, you can use the .badge-pill class. Pill Badges have rounded edges on both sides and are often used to display the number of items in a shopping cart or a notification count.
For example:
<span class="badge badge-pill badge-primary">5</span>Using Badges with Other Components
Bootstrap Badges can be used with other components such as buttons, navigation links, and list items to provide additional information.
Badges with Buttons:
To add a Badge to a button, you can simply add the .badge class to a <span> tag inside the button.
For example:
<button class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Badges with Navigation Links:
To add a Badge to a navigation link, you can add the .badge class to a <span> tag inside the link.
For example:
<a href="#" class="nav-link">
Home <span class="badge badge-primary">New</span>
</a>Badges with List Items:
To add a Badge to a list item, you can add the .badge class to a <span> tag inside the list item.
For example:
<li class="list-group-item">
Item 1 <span class="badge badge-secondary">10</span>
</li>Conclusion
Bootstrap Badges are a useful component that can provide quick information to the user. They are easy to use and can be styled to match the design of your web page.
Whether you are using Badges with buttons, navigation links, or list items, they are a versatile tool that can enhance the user experience on your web application.
