Badge in Bootstrap, concepts and usage


In the previous lesson, Taimienphi.vn taught you how to create pagination (pagination) in Bootstrap. In the next lesson below, Taimienphi.vn will guide you on how to create badges in Bootstrap.


Bootstrap badges are used to highlight some valuable information on the website, such as important headlines, warnings, etc. .vn to learn how Create Badge in Bootstrap.

Badge in Bootstrap

Table of Contents:
1. Create Badge in Bootstrap
2. The context layer for Badge
3. Create Badge Pill
4. Display the count in the Badge

1. Create Badge in Bootstrap

The following example illustrates how to create badges for elements that appear as inline (inline) using Bootstrap:

badge in bootstrap

The result will look like this:

badge in bootstrap 2

2. The context layer for Badge

To change the look and feel of the badge, we can use contextual layers or editing layers.

For example: In the example below we use the context and editing classes to change the badge interface:

badge in bootstrap 3

The result will look like this:

badge in bootstrap 4

3. Create Badge Pill

Similarly, we can create badge pill (that is, rounded corners) using the class .badge-pill, as in the example below:

badge in bootstrap 5

The result will look like this:

badge in bootstrap 6

4. Display the count in the Badge

You can also use the badge as part of a link or button to display a count, such as the number of received or unread messages, the number of notifications, and so on. that we often see in mail applications or Facebook apps, …

For example: The following example illustrates the count display in the Badge:

badge in bootstrap 7

The result will look like this:

badge in bootstrap 8

The above lesson has shown you how to create a Badge in Bootstrap. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article.

https://thuthuat.taimienphi.vn/badge-trong-bootstrap-51127n.aspx
In the next lesson, Taimienphi.vn will introduce you to the progress bar Progress Bar in Bootstrap.

.

Add a Comment

Your email address will not be published. Required fields are marked *