Badges in Bootstrap are essential when developing web and application applications. In this article, lets explore how to use badges in Bootstrap with TipsMake.com!
Badges in Bootstrap are essential when developing web and application applications. In this article, let's explore how to use badges in Bootstrap with TipsMake.com !
If you frequently browse the web or use apps, you'll often see badges or emblems. These can be notification icons, navigation buttons, or markers for special content.
Badges in Bootstrap 5 are similar. They are small labels that display brief information. They are used to add supplementary information to other elements on a webpage.
Using badges in Bootstrap 5 is very easy. Basically, you just need to use the CSS classes ` .badge` and `badge-*` within your `span` or `div` tag. For example, if you want to create a green badge, you can use the following HTML code:
Thông tin quan trọngCSS classes like `.badge-pill` and `.badge-lg` help you create circular or larger badges. Here's an example of sample code to create a large red circular badge:
Thông báoAdditionally, you can use the `.badge-primary`, `.badge-secondary`, `.badge-success`, `.badge-info`, `.badge-warning`, `.badge-danger`, `.badge-light`, and `.badge-dark` classes to design badges in Bootstrap 5. Here are the detailed instructions:
Badges are often used to display additional information, marking items as new or unread. To create a badge, simply add it to links, navigation, etc.
When the additional information section is blank, the Badge will be collapsed via the selector.:empty
Badges are commonly used in several situations, as shown in the image below:
Contextual Badges
Use the class .badgealong with the context class (like ` .bg-secondary`) in the elements to create rectangular badges with corresponding colors. See the following example for a better understanding:
Ví dụ về Bootstrap - TipsMake.com Examples of Badges
New Example Heading
Unread articles 5
You have new messages 20+
Some other HOT examples
The result will be as follows:
Pill badge
Besides rectangular badges with rounded corners, you can create softer-looking badges by using additional classes .rounded-pillaccordingly :
Ví dụ về Bootstrap - TipsMake.com Examples of Badges
New Example Heading
Unread articles 5
You have new messages 20+
Some other HOT examples
With the HTML file above, you will get the following badges:
A badge is placed inside an object.
You can place the active badge inside your website's navigation or any button. Simply place it next to the link or button, as in the following example:
Ví dụ về Bootstrap - TipsMake.com Badge inside the Button
The result will have the following interface:
At the end of this lesson, we've learned how to use Badges in some basic situations. Continue with the next lessons to better understand how to use Badges more effectively.